黑马程序员技术交流社区

标题: validation表单校验插件 [打印本页]
作者: zhouyan19901008    时间: 2019-2-23 20:06
标题: validation表单校验插件
本帖最后由 zhouyan19901008 于 2019-2-23 20:18 编辑

1.下载
l  官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
l  帮助文档位置：http://jqueryvalidation.org/documentation/
l  目录结构：

1.1   导入
validate是jQuery插件，及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库（可选）
<!--依赖的jQuery库-->
<script src="../js/jquery-1.11.0.js"type="text/javascript" charset="utf-8" />
<!--validation校验库-->
<script src="../js/jquery.validate.js"type="text/javascript" charset="utf-8" />
<!--国际化库，中文提示（可选）-->
<script src="../js/messages_zh.js"type="text/javascript" charset="utf-8" />
1.2    使用前提
validate需要手动的声明，对那个表单进行校验，及需要手动调用validate()方法。

<script type="text/javascript">
    $().ready(function() {
        $("#formId").validate();
    });
</script>

1.3    常见校验规则
  
校验类型
  
取值
描述
required
true|false
必填字段
email
email
邮件地址
url

路径
date
数字
日期
dateISO
字符串
日期（YYYY-MM-dd）
number

数字（负数，小数）
digits

整数
minlength
数字
最小长度
maxlength
数字
最大长度
rangelength
[minL,maxL]
长度范围
min

最小值
max

最大值
range
[min,max]
值范围
equalTo
jQuery表达式
两个值相同
remote
url路径
ajax校验


1.4      检验方式：js 代码方式
语法：
$(…).validate({
    rules:{},
    messages:{}
});

rules 规则语法：
    rules:{
        字段名:校验器,  name属性:校验规则
        字段名:校验器
    }

校验器语法：
    语法：{校验器:值,校验器:值,...}

message 提示语法：
    message:{
        字段名:{校验器:"提示",校验器:"提示",...}
    }

$("#formId").validate({
    rules:{
        username:{
                required：true
        },
        password:{
            required:true,
            rangelength:[2,5]
        },
        repassword:{
            equalTo:"[name='password']"
        }
    },
    messages:{
        username:{
            required:"不能为空"
        },
        password:{
            rangelength:"长度{0}-{1}之间"
        }
    }
});

1.5   案例实现JS代码
<script src="../js/jquery-1.11.0.js"type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.validate.js"type="text/javascript" charset="utf-8"></script>
<script src="../js/messages_zh.js"type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $().ready(function() {
        $("#formId").validate({
            rules:{
                loginname:{
                    required:true,
                    minlength:2,
                    maxlength:5
                },
                loginpwd:{
                    required:true,
                    number:true
                },
                reloginpwd:{
                    equalTo:"[name='loginpwd']"
                },
                email:"email",
                username:{
                    required:true,
                    rangelength:[2,5]
                },
                gender:{
                    required:true
                }

            },
            messages:{
                gender:{
                    required:"性别必须勾选"
                }
            }
        });
    });
</script>

HTML代码
<input type="radio"name="gender" value="男" />男
<input type="radio"name="gender" value="女" />女
<!--在指定位置显示错误信息
    * class 必须是error
    * for 必须设置错误对象

-->
<label for="gender"class="error"></label>


1.png (14.62 KB, 下载次数: 21)

1.png




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2