validate jq 插件用法

原文参考(http://www.runoob.com/jquery/jquery-plugin-validate.html) 侵删

一.引入插件

<script src="../js/jquery.validate.js" type="text/javascript"></script>

二.默认校验规则

(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

三.代码示例

1.html

<form id="form-two">
    <div class="ewb-r-con">
        <div class="ewb-right-row clearfix">
            <span class="ewb-right-sp1 l">电话：</span>
            <input type="text" class="ewb-r-txt1 ewb-r-txt2 l" name="telephone">
            <span class="ewb-right-sp2 l">*</span>
        </div>
        <div class="ewb-right-row clearfix">
            <span class="ewb-right-sp1 l">Email：</span>
            <input type="text" class="ewb-r-txt1 ewb-r-txt2 l" name="email">
            <span class="ewb-right-sp2 l">*</span>
        </div>
        <div class="ewb-right-row clearfix">
            <span class="ewb-right-sp1 l" title="请输入类型" required>类型：</span>
            <select class="ewb-r-sel choose-type l">
            </select>
            <span class="ewb-right-sp2 l">*</span>
        </div>
        <div class="clearfix">
            <button type="button" class="ewb-r-btn ewb-r-btn1 sumbit l">提 交</button>
            <button type="button" class="ewb-r-btn ewb-r-btn2 reset l">重 置</button>
        </div>
    </div>
</form>

2.js

$("#form").validate({
    rules: {
        telephone: {
            required: true,
            isMobile: true
        },
        email: {
            required: true,
            email: true
        },
        confirm_password: {
            required: true,
            minlength: 5,
            equalTo: "#password"
        }
    },
    messages: {
        telephone: {
            required: "请输入手机号",
            isMobile: "请正确填写您的号码"
        },
        email: {
            required: "请输入邮箱号",
            email: "请正确填写您的邮箱号"
        },
        confirm_password: {
            required: "请输入确认密码",
            minlength: "确认密码不能小于5个字符",
            equalTo: "两次输入密码不一致不一致"
        }
    }
});
//号码验证 拓展插件
jQuery.validator.addMethod("isMobile", function(value, element) {
    var length = value.length;
    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|\d{3,4}-?\d{7,9}$/;
    return this.optional(element) || mobile.test(value);
}, "请正确填写您的号码");

3.常用js配置参数

1.$("#signupForm").validate({ debug:true });//如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便
2.$.validator.setDefaults({ debug: true}) //如果一个页面中有多个表单都想设置成为debug，用
3.`$("#signupForm").validate({
submitHandler: function(form) { alert("submit!");
form.submit(); }

});`//验证通过的话执行方法

4. 验证的触发方式修改.png