首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript中Form表单技术汇总(推荐)

Posted in Javascript onJune 26, 2016

这里不进行很复杂的后台验证以及JavaScript的正则表达式，只是简单的介绍下这个技术，简单的后台接收与跳转，大概了解怎么验证的就可以。具体的技术，我后面还会继续写博客的。本人也还在学习中。

表单验证1-简单验证

进行简单的验证，用户名必须为abcd，密码长度必须大于等于6
然后根据用户输入的数据，在后面给出提示。

代码演示：

<html>
<head>
<title>DHTML技术演示---表单验证</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script>
function checkUserName(){
//alert("aa");//测试这个失去焦点监听是否管用
var oUserNameNode = document.getElementsByName("userName")[0];
var name = oUserNameNode.value;//这个type="text"的value的值是方框内的字符
//以后有后台时，“abcd”这个数据应该通过ajax技术向后台要
//这里我们只是做简单的演示-就是填写的name必须是abcd
if(name=="abcd"){
document.getElementById("userNameSpan").innerHTML="用户名正确".fontcolor("green");
}else{
document.getElementById("userNameSpan").innerHTML="用户名错误".fontcolor("red");
}
}
function checkPwd(){
var oUserPwdNode = document.getElementById("pwd")[0];
var pwd=oUserPwdNode.value;
if(pwd.length>=6){
document.getElementById("userPwdSpan").innerHTML="密码格式符合要求".fontcolor("green");
}else{
document.getElementById("userPwdSpan").innerHTML="密码长度必须大于等于6".fontcolor("red"); 
}
}
</script>
</head>
<body>
<form>
<!--onblur 在对象失去输入焦点时触发。 -->
用户名:<input type="text" name="userName" onblur="checkUserName()" />
<span id="userNameSpan"></span>
<br/>
<br/>
<!--为了演示清楚，密码这里也用type="text"了，其实应该用type="password"的-->
密码:<input type="text" name="pwd" onblur="checkPwd()" />
<span id="userPwdSpan"></span> 
</form>
</body>
</html>

360浏览器8.1 演示结果：

JavaScript中Form表单技术汇总(推荐)

用户名不符合规则：

JavaScript中Form表单技术汇总(推荐)

密码不符合规则：

JavaScript中Form表单技术汇总(推荐)

注册表单的验证2-正则表达式

代码演示：

<html>
<head>
<title>DHTML技术演示---注册表单的验证--js中使用正则表达式</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function checkUserName(){
var oUserNameNode = document.getElementsByName("userName")[0];
var userName = oUserNameNode.value;
//用正则检验
var reg = new RegExp("[a-z]{4}", "i");//包含4个连续的字母就可以，注意"i"的双引号不能省略
//i---表示忽略大小写
//var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略
//^代表开始 $代表结束
var oUserNameSpan = document.getElementById("userNameSpan");
//alert(reg.test(userName));
if (reg.test(userName)) {
oUserNameSpan.innerHTML = "用户名格式正确".fontcolor("green");
}
else {
oUserNameSpan.innerHTML = "用户名格式错误".fontcolor("red");
}
}
</script>
</head>
<body>
<!-- 演示JS中正则表达式的用法 -->
<script type="text/javascript">
//var reg = /^[0-9]{6}$/ ; //法一
var reg = new RegExp("^[0-9]{6}$");//法二
var str = "123456";
var bRes = reg.test(str);
//111使用正则表达式对象中的方法进行验证---只能用于判断是否匹配，功能类似于Java中的String类中的matches()方法
//alert(bRes);//true
//222使用String对象中的方法进行正则检验---功能更强大，类似于Java当中的Matcher工具
var res = str.match(reg);//匹配的结果保存在res(是一个数组)中，如果没有匹配到则res为null。
//alert(res);//123456
//match方法返回的数组有三个属性：input、index和lastIndex。
//★一点细节---使用new RegExp()方式时，特殊字符要转义
//var reg2 =/^\d{6}$/; //"\"不需要转义
var reg2= new RegExp("^\d{6}$");//※※※注意"\"要转义
//▲▲▲上面那句是错误的，必须要写成：new RegExp("^\\d{6}$")
//alert( reg2.test("123456") );
</script>
<form>
<!--onblur 在对象失去输入焦点时触发。 -->
用户名:<input type="text" name="userName" onblur="checkUserName()" />
<span id="userNameSpan"></span>
</form>
</body>
</html>

360浏览器8.1 演示结果：

只需要包含连续4个字母就可以了。

JavaScript中Form表单技术汇总(推荐)

JavaScript中Form表单技术汇总(推荐)

注册表单的验证且控制提交?前端校验:

代码文件创建位置：

JavaScript中Form表单技术汇总(推荐)

代码演示：

3form3.html

<html>
<head>
<title>DHTML技术演示---注册表单的验证且控制提交--前端校验</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function checkUserName(){
var oUserNameNode = document.getElementsByName("userName")[0];
var userName = oUserNameNode.value;
//用正则检验
var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母就可以，注意"i"的双引号不能省略
//i---表示忽略大小写
//var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略
//^代表开始 $代表结束
var oUserNameSpan = document.getElementById("userNameSpan");
if(reg.test(userName)){
oUserNameSpan.innerHTML="用户名格式正确".fontcolor("green");
return true;
}else{
oUserNameSpan.innerHTML="用户名格式错误".fontcolor("red");
return false; 
}
}
function checkPwd(){
var oUserPwdNode = document.getElementsByName("pwd")[0];
var pwd = oUserPwdNode.value;
var reg2 = new RegExp("^[\\w\\d]{6,9}$");
if(reg2.test(pwd)){
document.getElementById("userPwdSpan").innerHTML="密码格式符合要求".fontcolor("green");
return true;
}else{
document.getElementById("userPwdSpan").innerHTML="密码长度必须是6-9位的数字字母或下划线".fontcolor("red");
return false;
}
}
function checkUser(){
if(checkUserName() && checkPwd() ){//如果还有其他项需要在提交前验证，直接把那个验证函数写这里就行
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<!--通过注册onsubmit事件响应来控制表单的提交，如果return false则不会提交，而return true则会提交。如果不注册onsubmit事件即是return true
onsubmit 当表单将要被提交时触发。 
<form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return true;">
-->
<form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">
用户名：<input type="text" name="userName" onblur="checkUserName()" />
<span id="userNameSpan"></span>
<!--为了演示清楚，密码这里也用type="text"了，其实应该用type="password"的-->
密码：<input type="text" name="pwd" onblur="checkPwd()" />
<span id="userPwdSpan"></span>
<br/>
<input type="submit" value="注册"/>
</form>
<hr/>
<!--表单提交方式2---自己写个按钮来代替form自带的提交按钮-->
<form id="userinfo" action="/dhtmlProj/servlet/RegServlet" >
用户名:<input type="text" name="userName" onBlur="checkUserName2()"/>
<span id="userNameSpan2"></span><br/>
密码:<input type="text" name="pwd" onBlur="checkPwd2()"/>
<span id="userPwdSpan2"></span>
<br/>
</form>
<input type="button" value="注册" onclick="mySubmit()" />
<script type="text/javascript">
function mySubmit(){
var oFormNode = document.getElementById("userinfo");
if(checkUserName2()&&checkPwd2()){
oFormNode.submit();//submit 提交表单。 
}
}
function checkUserName2(){
var oUserNameNode = document.getElementsByName("userName")[1];
var userName = oUserNameNode.value;
//用正则检验
var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母就可以，注意"i"的双引号不能省略
//i---表示忽略大小写
//var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略
//^代表开始 $代表结束
var oUserNameSpan = document.getElementById("userNameSpan2");
if(reg.test(userName)){
oUserNameSpan.innerHTML="用户名格式正确".fontcolor("green");
return true;
}else{
oUserNameSpan.innerHTML="用户名格式错误".fontcolor("red");
return false; 
}
}
function checkPwd2(){
var oUserPwdNode = document.getElementsByName("pwd")[1];
var pwd = oUserPwdNode.value;
var reg2 = new RegExp("^[\\w\\d]{6,9}$");
if(reg2.test(pwd)){
document.getElementById("userPwdSpan2").innerHTML="密码格式符合要求".fontcolor("green");
return true;
}else{
document.getElementById("userPwdSpan2").innerHTML="密码长度必须是6-9位的数字字母或下划线".fontcolor("red");
return false;
}
}
</script>
</body>
</html>

show.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>这是注册后的显示页面</title>
</head>
<body>
<%
out.println(request.getAttribute("uName"));
out.println(request.getAttribute("pwd"));
%>
<% 
for(int i=0;i<3;i++){
//这个下面可以写html代码
%>
<div>欢迎</div>
<% 
//这个上面可以写html代码
} 
%>
</body>
</html>

RegServlet.Java

这个是new一个Servlet。

会自动给我们配好web.xml

JavaScript中Form表单技术汇总(推荐)

package cn.hncu.user;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");//设置编码
String name = request.getParameter("userName");//userName为提交过来的表单中的一个input的name属性
String pwd = request.getParameter("pwd");
//System.out.println(name);
request.setAttribute("uName", "hncu---"+name);
request.setAttribute("pwd", "pwd---"+pwd);
request.getRequestDispatcher("/dhtml/6formsubmit/jsps/show.jsp").forward(request, response);
//输出，导向另外的页面显示
}
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>RegServlet</servlet-name>
<servlet-class>cn.hncu.user.RegServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegServlet</servlet-name>
<url-pattern>/servlet/RegServlet</url-pattern>
</servlet-mapping> 
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

360浏览器8.1 演示图片：

JavaScript中Form表单技术汇总(推荐)

当格式都填写正确时，点注册按钮，自动跳转到另外的页面。

JavaScript中Form表单技术汇总(推荐)

有一个格式错误时，点注册按钮不会有反应的。

JavaScript中Form表单技术汇总(推荐)

JavaScript中Form表单技术汇总(推荐)

注册表单的验证且控制提交?前端校验?最终版本:

代码演示：

<html>
<head>
<title>DHTML技术演示---注册表单的验证且控制提交--前端校验--最终版本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
function check(name,reg,spanId,okInfo,errInfo){
var value = document.getElementsByName(name)[0].value;
//用正则检验
var oSpanNode = document.getElementById(spanId);
if(reg.test(value)){
oSpanNode.innerHTML=okInfo.fontcolor("green");
return true;
}else{
oSpanNode.innerHTML=errInfo.fontcolor("red");
return false;
}
}
function checkUserName(){
var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母,注意"i"中的双引号不能省略
return check("userName",reg,"userNameSpan","用户名格式正确","用户名格式错误");
}
function checkPwd(){
var reg = new RegExp("^[\\w\\d]{6,9}$");
return check("pwd",reg,"userPwdSpan","密码格式符合要求","密码长度必须是6-9位的数字字母或下划线");
}
function checkPwd2(){
var flag;
var pwd = document.getElementsByName("pwd")[0].value;
var pwd2 = document.getElementsByName("pwd2")[0].value;
var oSpanNode = document.getElementById("userPwd2Span");
if(pwd==pwd2){
oSpanNode.innerHTML="两次密码一致".fontcolor("green");
flag = true;
}else{
oSpanNode.innerHTML="两次密码不一致".fontcolor("red");
flag = false;
}
return flag;
}
function checkMail(){
var reg = /^\w+@\w+(\.\w+)+$/i;
return check("mail",reg,"userMailSpan","邮箱格式正确","邮箱格式不正确");
}
function checkUser(){//控制表单的提交
if(checkUserName() && checkPwd() && checkPwd2() && checkMail() ){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">
用户名：<input type="text" name="userName" onblur="checkUserName()" />
<span id="userNameSpan"></span>
<br/>
输入密码：<input type="text" name="pwd" onblur="checkPwd()" />
<span id="userPwdSpan"></span>
<br/>
确认密码：<input type="text" name="pwd2" onBlur="checkPwd2()"/>
<span id="userPwd2Span"></span>
<br/>
邮件地址：<input type="text" name="mail" onblur="checkMail()" />
<span id="userMailSpan"></span>
<br/>
<input type="submit" value="注册">
</form>
</body>
</html>

360浏览器8.1 演示结果：

JavaScript中Form表单技术汇总(推荐)

只有全部格式填写正确后再点注册按钮才会有响应。

JavaScript中Form表单技术汇总(推荐)

全部格式填写正确后，点注册按钮后的页面，其实就是跳到show.jsp页面了。（自己可以随便定位到哪的）

以上所述是小编给大家介绍的JavaScript中Form表单技术汇总(推荐)的相关知识，希望对大家有所帮助，如果大家有疑问欢迎给我留言，小编会及时回复大家的！

JavaScript中Form表单技术汇总(推荐)

- Author -

谙忆为你?

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
JavaScript之自定义类型
May 04 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
xmlplus组件设计系列之按钮（2）
Apr 26 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
jQuery滚动新闻实现代码
Jun 26 #Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 #Javascript
JS中的进制转换以及作用
Jun 26 #Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 #Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 #Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 #Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 #Javascript
铁拳(1) 战锤40K(1) 东方异文石(1) 吸血鬼(1) 模拟人生(1) 遗弃(1) LOL(1) 死亡搁浅(1) 绿林侠盗(1) 大话西游(1)
You might like
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
python使用cookielib库示例分享
2014/03/03 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python执行时间的几种计算方法
2020/07/31 Python
Python如何telnet到网络设备
2021/02/18 Python
阿根廷旅游网站：almundo阿根廷
2018/02/12 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站：What Goes Around Comes Around
2018/07/21 全球购物
Unineed旗下时尚轻奢网站：FABHunt
2019/05/13 全球购物
护士辞职信模板
2014/01/20 职场文书
同事吵架检讨书
2014/02/05 职场文书
厨师长岗位职责
2014/03/02 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
应用外语系自荐信
2014/06/26 职场文书
库房管理员岗位职责
2015/02/12 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
JavaScript函数柯里化
2021/11/07 Javascript
vue的项目如何打包上线
2022/04/13 Vue.js
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL