1.基于html表单，利用jQuery实现表单验证功能。
2.html基本结构和样式：
3.html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>美多商城-注册</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/register2.js"></script>
</head>
<body>
<div class="register_con">
<div class="l_con fl">
<a class="reg_logo"><img src="images/logo02.png"></a>
<div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
<div class="reg_banner"></div>
</div>
<div class="r_con fr">
<div class="reg_title clearfix">
<h1>用户注册</h1>
<a href="#">登录</a>
</div>
<div class="reg_form clearfix">
<form id='myform'>
<ul>
<li>
<label>用户名:</label>
<input type="text" name="user_name" id="user_name">
<span class="error_tip">提示信息</span>
</li>
<li>
<label>密码:</label>
<input type="password" name="pwd" id="pwd">
<span class="error_tip">提示信息</span>
</li>
<li>
<label>确认密码:</label>
<input type="password" name="cpwd" id="cpwd">
<span class="error_tip">提示信息</span>
</li>
<li>
<label>邮箱:</label>
<input type="text" name="email" id="email">
<span class="error_tip">提示信息</span>
</li>
<li class="agreement">
<input type="checkbox" name="allow" id="allow" checked="checked">
<label>同意”美多商城用户使用协议“</label>
<span class="error_tip2">提示信息</span>
</li>
<li class="reg_sub">
<input type="submit" value="注 册" name="">
</li>
</ul>
</form>
</div>
</div>
</div>
<div class="footer no-mp">
<div class="foot_link">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
<p>电话：010-****888 京ICP备*******8号</p>
</div>
</body>
</html>4.jquery表单验证代码：
$(function () {
// 定义开关变量
var flagUser=false
var flagPwd=false
var flagCpwd=false
var flagEmail=false
var flagAllow=true
// 找到所在标签元素
var $user_name = $('#user_name')
var $pwd=$('#pwd')
var $cpwd=$('#cpwd')
var $email=$('#email')
var $allow=$('#allow')
var $submit=$('#myform')
// 1.如果失去焦点，则进行检查判断用户名是否合法
$user_name.blur(function () {
// 封装函数 调用函数
fnCheckUser()
})
function fnCheckUser() {
// 获取用户输入的数据
var vals = $user_name.val()
// 正则，正则验证用户输入的数据是否合法
var re = /^\w{6,20}$/
if (vals == '') {
$user_name.next().show().html('用户名不能为空')
flagUser=false
return
}
if (re.test(vals)) {
// 合法 -- 隐藏报错信息
$user_name.next().hide()
flagUser=true
} else {
// 不合法 -- 报错 -- 下面的span标签显示
$user_name.next().show().html('用户名是6-20位数字、字母和下划线！')
flagUser=false
}
}
// 2.如果密码框失去焦点，则进行检查判断密码是否合法
$pwd.blur(function(){
// 封装函数，调用函数
fnCheckPwd()
})
function fnCheckPwd(){
// 获取密码框输入的数据
var vals=$pwd.val()
// 密码正则匹配表达式
var rePass = /^[\w!-@#$%^&*]{6,20}$/
// 如果输入框为空，则提示不能为空并return
if (vals==''){
$pwd.next().show().html('密码不能为空')
flagPwd=false
return
}
// 正则验证密码输入是否合法
if(rePass.test(vals))
{
// 如果匹配成功，则隐藏span标签
$pwd.next().hide()
flagPwd=true
}
else
{
// 如果匹配失败，则显示span标签，替换提示信息
$pwd.next().show().html('密码是6到20位字母、数字，还可包含@!#$%^&*-字符')
flagPwd=false
}
}
// 3.判断两次输入的密码是否一致
$cpwd.blur(function(){
// 封装函数，调用函数
fnCheckCpwd()
})
function fnCheckCpwd(){
// 获取重复密码框输入的数据
var vals=$pwd.val()
var cvals=$cpwd.val()
if(cvals==''){
$cpwd.next().show().html('重复密码框不能为空')
flagCpwd=false
return
}
if (vals==cvals){
$cpwd.next().hide()
flagCpwd=true
}
else{
$cpwd.next().show().html('两次密码输入不一致，请重新输入')
flagCpwd=false
return
}
}
// 4.如果邮箱框失去焦点，则进行检查判断邮箱是否合法
$email.blur(function(){
// 封装函数，调用函数
fnCheckEmail()
})
function fnCheckEmail(){
// 获取邮箱框输入的数据
var vals=$email.val()
// 邮箱正则匹配表达式
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i
// 如果输入框为空，则提示不能为空并return
if (vals==''){
$email.next().show().html('邮箱不能为空')
flagEmail=false
return
}
// 正则验证邮箱输入是否合法
if(reMail.test(vals))
{
// 如果匹配成功，则隐藏span标签
$email.next().hide()
flagEmail=true
}
else
{
// 如果匹配失败，则显示span标签，替换提示信息
$email.next().show().html('你输入的邮箱格式不正确')
flagEmail=false
}
}
// 5.点击同意协议复选框，判断是否勾选。如果勾选，则隐藏提示信息，没有勾选，则显示报错信息
$allow.click(function(){
fnCheckAllow()
})
// 封装函数
function fnCheckAllow(){
if($allow.prop('checked'))
{
$allow.next().next().hide()
flagAllow=true
}
else
{
$allow.next().next().show().html("请勾选同意协议")
flagAllow=false
}
}
// 6.所有输入框验证通过再提交注册
$submit.submit(function(){
if(flagUser && flagPwd && flagCpwd && flagEmail && flagAllow){
alert('OK!')
}
else{
alert("Not OK!")
return false
}
})
})5.总结归纳：
(1)jq常用的事件属性
- ready() DOM加载完成
- click() 鼠标单击
- 焦点相关事件
- blur() 元素失去焦点
- focus() 元素获得焦点
- 鼠标移入移出事件
- mouseover() 鼠标进入（进入子元素也触发）
- mouseout() 鼠标离开（离开子元素也触发）
- mouseenter() 鼠标进入（进入子元素不触发）
- mouseleave() 鼠标离开（离开子元素不触发）
- hover() 同时为mouseenter和mouseleave事件指定处理函数
- submit() 用户递交表单
当单击表单提交按钮时触发执行submit函数
(2)正则在js的使用方法
在jQuery中，没有额外封装正则的使用方法， 用原生js实现正则
- 正则表达式在js的两种写法：
var re=new RegExp(‘规则’, ‘可选参数’)
var re=**/规则/**参数 - 正则表达式对象的使用
正则变量.test(数据) – 验证数据是否合法
- 合法： 返回true
- 不合法： 返回false
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
