jQuery实现表单验证

时间：2024-10-21 08:40:01

1.基于html表单，利用jQuery实现表单验证功能。

基本结构和样式：
在这里插入图片描述
代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///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/">
	<link rel="stylesheet" type="text/css" href="css/">
	<script type="text/javascript" src="js/jquery-1.12."></script>
	<script type="text/javascript" src="js/"></script>
</head>
<body>
	<div class="register_con">
		<div class="l_con fl">
			<a class="reg_logo"><img src="images/"></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" >
						<span class="error_tip">提示信息</span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" >
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" >
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>邮箱:</label>
						<input type="text" name="email" >
						<span class="error_tip">提示信息</span>
					</li>
					<li class="agreement">
						<input type="checkbox" name="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>

表单验证代码：

$(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 ((vals)) {
            // 合法 -- 隐藏报错信息
            $user_name.next().hide()
            flagUser=true
        } else {
            // 不合法 -- 报错 -- 下面的span标签显示
            $user_name.next().show().html('用户名是6-20位数字、字母和下划线！')
            flagUser=false
        }
    }

        // 2.如果密码框失去焦点，则进行检查判断密码是否合法
    $(function(){
        // 封装函数，调用函数
        fnCheckPwd()
    })
    function fnCheckPwd(){
        // 获取密码框输入的数据
        var vals=$()
        // 密码正则匹配表达式
        var rePass = /^[\w!-@#$%^&*]{6,20}$/
        // 如果输入框为空，则提示不能为空并return
        if (vals==''){
            $().show().html('密码不能为空')
            flagPwd=false
            return
        }
        // 正则验证密码输入是否合法
        if((vals))
        {
            // 如果匹配成功，则隐藏span标签
            $().hide()
            flagPwd=true
        }
        else
        {
            // 如果匹配失败，则显示span标签，替换提示信息
            $().show().html('密码是6到20位字母、数字，还可包含@!#$%^&*-字符')
            flagPwd=false
        }
    }

    // 3.判断两次输入的密码是否一致
    $(function(){
        // 封装函数，调用函数
        fnCheckCpwd()
    })
    function fnCheckCpwd(){
        // 获取重复密码框输入的数据
        var vals=$()
        var cvals=$()
        if(cvals==''){
            $().show().html('重复密码框不能为空')
            flagCpwd=false
            return  
        }
        if (vals==cvals){
            $().hide()
            flagCpwd=true
        }
        else{
            $().show().html('两次密码输入不一致，请重新输入')
            flagCpwd=false
            return
        }
    }

    // 4.如果邮箱框失去焦点，则进行检查判断邮箱是否合法
    $(function(){
        // 封装函数，调用函数
        fnCheckEmail()
    })
    function fnCheckEmail(){
        // 获取邮箱框输入的数据
        var vals=$()
        // 邮箱正则匹配表达式
        var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i
        // 如果输入框为空，则提示不能为空并return
        if (vals==''){
            $().show().html('邮箱不能为空')
            flagEmail=false
            return
        }
        // 正则验证邮箱输入是否合法
        if((vals))
        {
            // 如果匹配成功，则隐藏span标签
            $().hide()
            flagEmail=true
        }
        else
        {
            // 如果匹配失败，则显示span标签，替换提示信息
            $().show().html('你输入的邮箱格式不正确')
            flagEmail=false
        }
    }
    
    
     // 5.点击同意协议复选框，判断是否勾选。如果勾选，则隐藏提示信息，没有勾选，则显示报错信息
     $(function(){
         fnCheckAllow()
        })
    // 封装函数
    function fnCheckAllow(){
        if($('checked'))
         {
            $().next().hide()
            flagAllow=true
         }
         else
         {
             $().next().show().html("请勾选同意协议")
             flagAllow=false
         }
    }

    // 6.所有输入框验证通过再提交注册
    $(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

相关文章