A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© zhouyan19901008 初级黑马   /  2019-2-23 20:06  /  746 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 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, 下载次数: 17)

1.png

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马