Jquery validate插件之表单校验

需求:
通过validate插件来校验表单,validate是别人封装好的第三方工具

技术分析:
jqery validate

一、validate使用步骤:
1. 导入jquery.js
2. 导入validate.js
3. 在页面加载成功后,对表单进行校验 $(“选择器”).validate()
4. 在validate中编写校验规则

$("选择器").validate({
        rules:{
       },
        messages:{
     }
        });

二、默认校验规则

(1)required:true 必输字段
(2)remote:”check.php” 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错,慎用
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:”#field” 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
三、更改错误信息显示的样式

设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个validation.css专门用于维护校验文件的样式

<style>
input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
  padding-bottom: 2px;
  font-weight: bold;
  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}
style>

例子:

<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <script src="../js/jquery-1.11.0.js" type="text/javascript">script>
        
        <script src="../js/jquery.validate.js" type="text/javascript">script>
        
        <script src="../js/messages_zh.js" type="text/javascript">script>

        <script type="text/javascript">
            $(function () {
      
                $("#formId").validate({
                    rules:{
                        //字段的name属性:"校验器"
                        //字段的name属性:{校验器:"值",校验器:"值"}
                        username:"required",
                        password:{
                            required:true,
                            digits:true
                        },
                        repassword:{
                            equalTo:"[name=password]"
                        },
                        zuixiaozhi:{
                            min:3
                        },
                        shuzhiqujian:{
                            range:[5,10]
                        }
                    },
                    messages:{
                        //字段的name属性:"提示内容"
                        //字段的name属性:{校验器:"提示内容",校验器:"提示内容"}
                        username:"请填写用户名,用户名不能为空",
                        password:{
                            required:"密码不能为空",
                            digits:"密码只能是数字"
                        },
                        repassword:{
                            equalTo:"两次输入的内容不一致"
                        },
                        zuixiaozhi:{
                            //第一个约束的索引
                            min:"最小值应该大于{0}"
                        },
                        shuzhiqujian:{
                            range:"输入的范围在{0}~{1}之间"
                        }
                    }
                });
            })
        script>
    head>
    <body> 
        <form id="formId" action="">
            必填:<input type="text" name="username"/> <br/>
            必填数字:<input type="text" name="password"/> <br />
            必填重复:<input type="text" name="repassword"/> <br />
            最小值:<input type="text" name="zuixiaozhi"/> <br />
            区间:<input type="text" name="shuzhiqujian"/> <br />
            <input type="submit" value="提交"/>
        form>
    body>
html>

你可能感兴趣的:(JavaWeb,jquery,插件,表单)