validate表单验证的用法

心已赠人 2022-03-01 09:54 220阅读 0赞

# 正则表达式验证字符串 #

var value='这是待验证的字符串'
    var char=/^[\u4e00-\u9fa5]+$/; //稚嫩恶搞输入汉字
    console。log（char.test(value)）

# validate表单验证的用法 #

html部分

<form id="registerPepole" class="container">
                            <%--姓名--%>
                            <div class="reg-menu">
                                <span class="reg-danger">*</span>
                                <label for="name" language="participantsApply.name" >姓名</label>
                                <input type="text" id="name" name="name">
                                <small  id="helpName"></small>
                            </div>
                            <%--英文名--%>
                            <div class="reg-menu">
                                <label language="participantsApply.englishName">英文名</label>
                                <input type="text" id="englishName" name="englishName">
                                <small id="helpEnglish"></small>
                            </div>
                            <%--手机号--%>
                            <div class="reg-menu5">
                                <span class="reg-danger">*</span>
                                <label language="participantsApply.phone">手机号</label>
                                <input type="text" id="phone" name="phone" />
                                <small id="helpPhone"></small>
                            </div>
                            <%--邮箱--%>
                            <div class="reg-menu4">
                                <label language="participantsApply.email">邮箱</label>
                                <input type="text" id="email" name="email" placeholder="邮箱地址可选填">
                                <small></small>
                            </div>
                            <%--证件号--%>
                            <div class="reg-menu7">
                                <span class="reg-danger" >*</span>
                                <label language="participantsApply.Identification Number">证件号码</label>
                                <input type="text" id="idNumber" name="idNumber">
                                <small id="helpID"></small>
                            </div>
                            <%--确认证件号--%>
                                <div class="reg-menu9">
                                    <span class="reg-danger" >*</span>
                                    <label language="participantsApply.Confirm ID number">确认证件号</label>
                                    <input type="text" id="affirmNumber" name="affirmNumber"/>
                                    <small id="helpAffirm"></small>
                                </div>
                        </div>
                    </div>
                    
                    <div class="register">
                        <button  class="btn btn-default btn-lg btn-primary" type="submit" name="registerBtn" id="registerBtn" language="participantsApply.register">注册</button>
                    </div>
    </form>

jquery部分

$.validator.setDefaults({ 
        submitHandler: function() { 
            alert('表单提交');
    });
    
    //自定义验证规则
    jQuery.validator.addMethod("zh", function(value, element) { 
        var tel = /^[\u4e00-\u9fa5]+$/;
        return this.optional(element) || (tel.test(value));
    }, "请输入汉字");
    jQuery.validator.addMethod("en", function(value, element) { 
        var tel = /^[a-zA-Z \s]{2,20}$/;
        return this.optional(element) || (tel.test(value));
    }, "请输入英文");
    $.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})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");
    jQuery.validator.addMethod("isCard", function (value, element) { 
        var card = $("input[name='idNumber']").val();
        var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        return pattern.test(card);
    }, "请输入正确的身份证号");
    jQuery.validator.addMethod("reIsCard", function (value, element) { 
        var card = $("input[name='idNumber']").val();
        var reCard = $("input[name='affirmNumber']").val();
        if (card == reCard) { 
            return true
        }else { 
            return false
        }
    }, "确认证件号");
    
    $().ready(function() { 
        $("#registerPepole").validate({ 
            rules: { 
                name: { 
                    required: true,
                    zh:true,
                    minlength:2
                },
                englishName:{ 
                    en:true
                },
                phone:{ 
                    required: true,
                    isMobile:true
                },
                email:{ 
                    email:true
                },
                idNumber:{ 
                    required: true,
                    isCard:true
                },
                address:{ 
                    required: true
                },
                affirmNumber:{ 
                    reIsCard:true
                }
            },
            messages: { 
                name: { 
                    required: "请输入用户名",
                    zh:"请输入中文名",
                    minlength:"至少2个汉字"
                },
                englishName:{ 
                    en:"请输入2-20个字母"
                },
                phone:{ 
                    required:"请输入手机号",
                    isMobile:"请正确输入电话号码"
                },
                email:{ 
                    email:"邮箱格式不正确"
                },
                idNumber:{ 
                    required: "请输入证件号",
                    isCard:"证件号格式不正确"
                },
                address:{ 
                    required: "不能为空"
                },
                affirmNumber:{ 
                    reIsCard:"两次输入不一致，请重新输入"
                }
            },
            errorPlacement: function(error, element) { //修改错误信息提示位置,element是验证元素input框等等
                error.appendTo(element.siblings('small'));
            }
        });
    });