Validate表单验证

validate

一、 validate的使用步骤

  1. 引入jquery.min.js
  2. 引入 jquery.validate.js
  3. 页面加载后对表单进行验证 $("#表单id名").validate({})
  4. 在validate中的rules中编写验证规则(格式如下)
    • 字段的name属性:“校验器”(tisps:一个输入框只有一个校验器的时候使用
    • 字段的name属性:{校验器:值,校验器:值}(tips:输入框需要有多个校验器的时候使用)
  5. 在validate中的messages中编写提示信息(tips格式与rules相对应)
  6. 在validate中的submitHandler中编写验证通过执行的内容

图示如下:
Validate表单验证_第1张图片

案例代码如下

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="scripts/common/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common/jquery.validate.js"></script
<script type="text/javascript">
	 $("#zhuce").validate({
            rules:{
                regist_username:{
                    required:true
                   /* remote:{
                        type: "post",url: url,
                        data:{
                            userName:function () {
                                return $("regist_username").val();
                            }
                        }
                    }用ajax判断数据库中用户名是否存在*/
                },
                regist_password:{
                    required:true,
                    minlength:6
                },
                final_password:{
                    equalTo:"#regist_password"
                }
            },
            messages:{
                regist_username:{required:"用户名不能为空"},
                regist_password:{required:"密码不能为空",minlength:"密码最小的长度为6"},
                final_password:{equalTo:"两次密码不一致"}
            },
            submitHandler: function () {
            //验证通过后进行注册
                register();
            }
        })
  </script>
</head>
<body>
  <form id="zhuce">
            <dl>
                <dt>
                    <div class='header'>
                        <h3>&nbsp;</h3>
                    </div>
                </dt>
                <dt></dt>
                <dt>
                    <div class='letter'>
                        <label for="regist_username">用户名:&nbsp;</label>
                        <input type="text" name="regist_username" id="regist_username" tabindex='5'/>
                    </div>
                </dt>
                <dt>
                    <div class='letter'>&nbsp;&nbsp;&nbsp;:&nbsp;<input type="text" name="nickname" id="nickname" tabindex='6'/>
                    </div>
                </dt>
                <dt>
                    <div class='letter'>
                        <label for="regist_password">&nbsp;&nbsp;&nbsp;:&nbsp;</label>
                       <input type="password" name="regist_password" id="regist_password" tabindex='7'/>
                    </div>
                </dt>
                <dt>
                    <div class='password'>
                        <label for="final_password">&nbsp;&nbsp;&nbsp;确认密码:&nbsp;</label>
                        <input type="password" name="final_password" id="final_password" tabindex='8'/>
                    </div>
                </dt>
                <dt>
                    <div>
                        <input type="submit" name="" id="regist_button" value=' 注 册 ' tabindex='9'/>
                        <input type="button" name="" id="back" value=' 返 回 ' tabindex='10'/>
                    </div>
                </dt>
            </dl>
        </form>
</body>
</html>

默认校验规则

序号 校验类型 取值 描述
1 required true&false 必须填写的字段
2 email “@”&“email” 必须输入正确格式的电子邮件
3 remote url路径 使用ajax进行验证
4 date 数字 正确格式日期 tips:ie6有bug
5 dateISO 字符串 正确格式的日期 例如:2018-11-28,2018/11/28 tips:只验证格式,不验证有效性
6 number true&false 合法的数字
7 digits true&false 整数
8 creditcard true&false 合法的信用卡号
9 equalTo JQuery表达式(eg:"#regist_password") 输入值必须和 #regist_password相同。
11 maxlength 数字 最大长度
12 minlength 数字 最小长度
13 rangelength [min,max] 输入长度必须在 min和 max之间的字符串(tips:汉字算一个字符
14 range [min,max] 输入值必须在 min和 max之间的数字
15 max :n 最大值不能大于n
16 min :n 最小值不能小于n

你可能感兴趣的:(Validate表单验证)