jquery.validate格式验证

JS 正则表达式
c# 正则表达式 Regex  

需要引入jquery-1.7.1.js和jquery.validate.js两个js文件

jquery.validate.js下载地址:jq.validate文件-Javascript代码类资源-CSDN下载

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script src="Scripts/jquery.validate.js"></script>
    <script>
        $().ready(function () {

            ///自定义ajax验证
            jQuery.validator.addMethod("ExistsCompany", function (value, element) {    //用jquery ajax的方法验证电话是不是已存在 
                var flag = 1;
                $.ajax({
                    type: "POST",
                    url: '/CustomerMonkey/ExistsCompanyAction',
                    async: false,
                    data: {
                        'name': value, "monkeyid": GetQueryString("monkeyid"), "customerid": function () {
                            return $("#hidCustomerID").val();
                        }
                    },
                    success: function (data) {
                        if (data.result == "TRUE") {
                            flag = 0;
                        }
                        else if (data.result == "NO") {
                            compaymsg = "Name does not exist";
                        }
                    }
                });
                if (flag == 0) {
                    return true;
                } else {
                    return false;
                }
            }, compaymsg);


            $("#form1").validate({
                rules: {
                    txtUserName:
                    {
                        required: true,
                        minlength: 6,
                        rangelength: [6, 20],           //长度5-10之间
                        remote: {
                            url: "/admin/CheckName",    //后台处理程序
                            type: "post",               //数据发送方式
                            dataType: "json",           //接受数据格式
                            data: {                     //要传递的数据
                                name: function () {
                                    return $("#txtUserName").val();
                                }
                            }
                        },
                        ExistsCompany: true,
                    },
                    txtPassword: {
                        required: true,
                        minlength: 6,
                        rangelength: [6, 20],    //长度5-10之间
                        password: true,
                    },
                    txtPwd: {
                        required: true,
                        equalTo: "#txtPassword",
                        minlength: 6,
                        rangelength: [5, 20],    //长度5-10之间
                        password: true,
                    },
                    txtDisplayName: {
                        required: true,
                        minlength: 6,
                        rangelength: [6, 20],    //长度5-10之间
                    },
                    txtAge: {
                        required: true,
                        digits: true,
                        min: 1,
                        max: 100
                    },
                    sex: {
                        required: true,
                    },
                    txtCard: {
                        required: true,
                        creditcard: true,
                    },
                    txtidcard: {
                        required: true,
                        idcard: true,
                    },
                    txtEmail: {
                        required: true,
                        email: true,
                    },
                    txtTel: {
                        required: true,
                        phone: true,
                    },
                    txtQQ: {
                        required: true,
                        qq: true,
                    },
                    txtUrl: {
                        required: true,
                        url: true,
                    },
                    txtZipCode: {
                        required: true,
                        zipcode: true
                    },
                    txtDate: {
                        required: true,
                        date: true,
                    },
                    txtISO: {
                        required: true,
                        dateISO: true,
                    },
                    txtMAC: {
                        required: true,
                        mac: true,
                    },
                    txtIP: {
                        required: true,
                        ip: true,
                    },
                    txtPort: {
                        required: true,
                        port: true,
                    },
                    txtCarNumber: {
                        required: true,
                        carNumber: true,
                    },
                    txtTimer: {
                        required: true,
                        timer: true,
                    },
                    filFile: {
                        required: true,
                        filetype: ["mp3", "wma", "wav"]
                    }
                },
                messages: {
                    txtUserName: {
                        required: "请输入登录名",
                        minlength: jQuery.format("登录名不能小于{0}个字符"),
                        rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
                        remote: "登录名已存在",
                    },
                    txtPassword: {
                        required: "请输入密码",
                        minlength: jQuery.format("密码不能小于{0}个字符"),
                        rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
                        password: "密码只能是数字、字母与下划线"
                    },
                    txtPwd: {
                        required: "请输入确认密码",
                        minlength: "确认密码不能小于5个字符",
                        rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
                        equalTo: "两次输入密码不一致不一致",
                        password: "密码只能是数字、字母与下划线"
                    },
                    txtDisplayName: {
                        required: "请输入用户名",
                        minlength: jQuery.format("密码不能小于{0}个字符"),
                        rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
                    },
                    txtAge: {
                        required: "请输入年龄",
                        digits: "只能输入数字",
                        min: "最小值是1",
                        max: "最大值是100"
                    },
                    sex: {
                        required: "请选择性别",
                    },
                    txtCard: {
                        required: "请输入信用卡",
                        creditcard: "请输入信用卡",
                    },
                    txtidcard: {
                        required: "请输入身份证号",
                        idcard: "身份证号格式不正确",
                    },
                    txtEmail: {
                        required: "请输入邮箱",
                        email: "邮箱格式不正确",
                    },
                    txtTel: {
                        required: "请输入手机",
                        phone: "手机格式不正确"
                    },
                    txtQQ: {
                        required: "请输入QQ",
                        qq: "qq格式不正确",
                    },
                    txtUrl: {
                        required: "请输入网址",
                        url: "请输入正确的网址",
                    },
                    txtZipCode: {
                        required: "请输入邮编",
                        zipcode: "邮编格式不正确"
                    },
                    txtDate: {
                        required: "请输入时间",
                        date: "日期格式不正确",
                    },
                    txtISO: {
                        required: "请输入ISO",
                        dateISO: "ISO格式错误"
                    },
                    txtMAC: {
                        required: "请输入MAC地址",
                        mac: "MAC地址格式不正确"
                    },
                    txtIP: {
                        required: "请输入IP地址",
                        ip: "IP地址格式不正确"
                    },
                    txtPort: {
                        required: "请输入端口号",
                        ip: "端口号格式不正确"
                    },
                    txtCarNumber: {
                        required: "请输入车牌号",
                        carNumber: "车牌号格式不正确"
                    },
                    txtTimer: {
                        required: "请输入时间",
                        timer: "时间格式不正确"
                    },
                    filFile: {
                        required: "请选择文件",
                        filetype: "只能上传MP3,WMA,WAV格式文件",
                    }
                },
                ignore: ":hidden:not(select)",//下拉框非空验证
                //ignore: "",//
                submitHandler: function (form) {
                    //避免重复提交数据
                    $(form).find(":submit").attr("disabled", true);
                    form.submit();
                },
                //指定错误信息位置
                errorPlacement: function (error, element) {
                    if (element.is(':radio') || element.is(':checkbox')) {  //如果是radio或checkbox
                        var eid = element.attr('name');                     //获取元素的name属性
                        error.appendTo(element.parent());                   //将错误信息添加当前元素的父结点后面
                    } else {
                        error.insertAfter(element);
                    }
                },
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <p>
                <label>登录名:</label>
                <input id="txtUserName" name="txtUserName" class="sf" type="text" value="" />
            </p>
            <p>
                <label>密码:</label>
                <input id="txtPassword" name="txtPassword" class="sf" type="password" value="" />
            </p>
            <p>
                <label>确认密码:</label>
                <input id="txtPwd" name="txtPwd" type="password" value="" class="sf" />
            </p>
            <p>
                <label>用户名:</label>
                <input id="txtDisplayName" name="txtDisplayName" class="mf" type="text" value="" />
            </p>
            <p>
                <label>年龄:</label>
                <input id="txtAge" name="txtAge" class="mf" type="text" value="" />
            </p>
            <p>
                <label>性别:</label>
                <input id="Radio1" type="radio" value="" name="sex" />男<input id="Radio2" type="radio" value="" name="sex" />女
            </p>
            <p>
                <label>信用卡:</label>
                <input id="txtCard" name="txtCard" class="sf" type="text" value="" />
            </p>
            <p>
                <label>身份证:</label>
                <input id="txtidcard" name="txtidcard" class="sf" type="text" value="" />
            </p>
            <p>
                <label>邮箱:</label>
                <input id="txtEmail" name="txtEmail" class="sf" type="text" value="" />
            </p>
            <p>
                <label>手机:</label>
                <input id="txtTel" name="txtTel" class="sf" type="text" value="" />
            </p>
            <p>
                <label>QQ:</label>
                <input id="txtQQ" name="txtQQ" class="sf" type="text" value="" />
            </p>
            <p>
                <label>网址:</label>
                <input id="txtUrl" name="txtUrl" class="sf" type="text" value="" />
            </p>
            <p>
                <label>邮编:</label>
                <input id="txtZipCode" name="txtZipCode" class="sf" type="text" value="" />
            </p>
            <p>
                <label>时间:</label>
                <input id="txtDate" name="txtDate" class="sf" type="text" value="" />
            </p>
            <p>
                <label>ISO:</label>
                <input id="txtISO" name="txtISO" class="sf" type="text" value="" />
            </p>
            <p>
                <label>文件:</label>
                <input id="filFile" name="filFile" type="file" />
            </p>
        </div>
        <input id="Submit1" type="submit" value="submit" />
    </form>
</body>
</html>

password: function (value, element) {
    return this.optional(element) || /^\w+$/.test(value);
},
address: function (value, element) {
    return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9\s]+$/.test(value);
},
///固定电话123-85611111 或 0311-8561111
phone: function (value, element) {
    return this.optional(element) || /^\d{3}-\d{8}$|\d{4}-\d{7}$/.test(value);
},
///13866666666
telphone: function (value, element) {
    return this.optional(element) || /^(\+86)|(86)?1[3,5,8]{1}[0-9]{1}[0-9]{8}$/.test(value)
},
mobilephone: function (value, element) {
    return this.optional(element) || /^\d{3}-\d{8}$|\(\d{3}\)\d{8}$|\d{4}-\d{7}$|\(\d{4}\)\d{7}$|1[358]\d{9}$/.test(value);
},
//身份证号
idcard: function (value, element) {
    return this.optional(element) || /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);
},
//qq
qq: function (value, element) {
    return this.optional(element) || /^[1-9]\d{5,8}$/.test(value);
},
ip: function (value, element) {
    return this.optional(element) || /^(\d|[1-9]\d|1\d{2}|2[0-5][0-5])\.(\d|[1-9]\d|1\d{2}|2[0-5][0-5])\.(\d|[1-9]\d|1\d{2}|2[0-5][0-5])\.(\d|[1-9]\d|1\d{2}|2[0-5][0-5])$/.test(value);
},
mac: function (value, element) {
    return this.optional(element) || /^[A-F0-9]{2}(-[A-F0-9]{2}){5}$|^[A-F0-9]{2}(:[A-F0-9]{2}){5}$/.test(value);
},
port: function (value, element) {
    return this.optional(element) || /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test(value);
},
carNumber: function (value, element) {
    return this.optional(element) || /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领]{1}[a-hj-zA-HJ-Z]{1}[警京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼]{0,1}[a-hj-np-zA-HJ-NP-Z0-9]{4,5}[a-hj-np-zA-HJ-NP-Z0-9挂学警港澳]{1}$/.test(value);
},
timer: function (value, element) {
    return this.optional(element) || /^(([0-1]?\d)|(2[0-4])):[0-5]?\d$/.test(value);
},
///上传文件格式验证
filetype: function (value, element, param) {
    var fileType = value.substring(value.lastIndexOf(".") + 1).toLowerCase();
    return this.optional(element) || $.inArray(fileType, param) != -1;
},
///金额
money: function (value, element) {
    // return this.optional(element) || /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value);  //金额,不允许货币格式
    //允许, 货币格式
    return this.optional(element) || /^([1-9]{1}[0-9]{0,3}(\,[0-9]{3,4})*(\.[0-9]{0,2})?|[1-9]{1}\d*(\.[0-9]{0,2})?|0(\.[0-9]{0,2})?|(\.[0-9]{1,2})?)$/.test(value);
},

site.css

/* validation styles
-------------------------------------------------- */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

/* .[text控件上级div的class名称] label*/
.layui-input-block label {
    margin-bottom: 0px;
}

/*文本框变成红色 .[text控件上级div的class名称] input.error*/
.layui-input-block input.error {
    border: 1px solid red;
}

/* .[text控件上级div的class名称] label.error */
.layui-input-block label.error {
    /*margin-left: 36px;*/
    font-weight: bold;
    color: #F00;
}

/* .[text控件上级div的class名称] label.error */
.form-group label.error {
    /*margin-left: 36px;*/
    color: #F00;
}

.validateerror {
    text-align: left;
    font-weight: bold;
    margin: 6px 0 0 55px;
    color: #F00;
}

*
*
重名验证时,ajax请求后返回的结果只能是bool类型,只能返回true或者false,别的类型不可以
*
*
*
*
*

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值