前端加验证标签

最新推荐文章于 2022-10-21 18:02:23 发布

josjonah

最新推荐文章于 2022-10-21 18:02:23 发布

阅读量320

点赞数

分类专栏： js验证 JavaScript 文章标签： js验证

本文链接：https://blog.csdn.net/josjiang1/article/details/84949904

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

js验证

0 篇文章 0 订阅

订阅专栏

前端代码：

<label for="" class="col-sm-2 control-label">
                  姓名
                </label>
                <div class="col-sm-10 bxRem">
                  <input id="edit_Id" type="hidden" value=""/>
                  <input id="Add_Name"   type="text" class="form-control input-md Mroad required_valid TblnonEmpty" data-length="10" autocomplete="off" />
                  <p class="help-block">
                      <xsl:text> </xsl:text>
                  </p>
                </div>

注意input加了required_valid和TblnonEmpty

js代码验证：

var data = $(".required_valid");
    //校验
    if (!RequiredValid(data)) {
        return
    }

jsRequiredValid方法：

//验证
function RequiredValid(obj) {
    var flag = true;
    obj.each(function () {
        if (!($(this).closest('.form-group').is(':hidden'))) {
                var valueLen = $.trim($(this).val())

                if ($(this).hasClass('TblnonEmpty')) {
                    var length = $(this).attr('data-length') - 0;
                    if ((valueLen == '') || (valueLen.length > length)) {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('不能为空且长度不能大于' + length);
                        flag = false;
                    } else {
                        $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                        $(this).siblings('.help-block').html('');
                    }
                } else if ($(this).hasClass('TblnonEmptySelect')) {

                    if ((valueLen == '') || (valueLen == '-1')) {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('不能为空');
                        flag = false;
                    } else {
                        $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                        $(this).siblings('.help-block').html('');
                    }

                } else if ($(this).hasClass('numberValid')) {
                    var r = /^\+?[0-9]*$/;　　//判断是否为正整数 
                    var length = $(this).attr('data-length') - 0;

                    if ((valueLen == '') || (!r.test(valueLen) || (valueLen.length > length) || ((valueLen - 0) == 0))) {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('不能为空且不能为0且只能为数字且长度不能超过' + length);
                        flag = false;
                    } else {
                        $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                        $(this).siblings('.help-block').html('');
                    }
                } else if ($(this).hasClass('uploadValid')) {
                    //debugger;
                    if (valueLen == '') {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('不能为空');
                        flag = false;
                    } else {
                        $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                        $(this).siblings('.help-block').html('');
                    }

                } else if ($(this).hasClass('validRequired')) {

                    if (valueLen == '') {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('不能为空');
                        flag = false;
                    } else {
                        $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                        $(this).siblings('.help-block').html('');
                    }

                } else if ($(this).hasClass('phoneValid')) { //手机号验证
                    var re = /^1[34578]\d{9}$/
                    if (valueLen == "") {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('不能为空');
                        flag = false;
                    } else if (!re.test(valueLen)) {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('手机号码格式错误');
                        flag = false;
                    } else {
                        $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                        $(this).siblings('.help-block').html('');
                    }
                } else if ($(this).hasClass('emailValid')) { //邮箱验证
                    if (valueLen != "") {
                        var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
                        if (!reg.test(valueLen)) {
                            $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                            $(this).siblings('.help-block').html('邮箱格式错误');
                            flag = false;
                        } else {
                            $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                            $(this).siblings('.help-block').html('');
                        }
                    }
                } else if ($(this).hasClass('pswValid')) {//密码验证
                    var length = $(this).attr('data-length') - 0;
                    //if ((valueLen == '') || (valueLen.length > length)) {
                    if ((valueLen == '') || (valueLen.length > length)) {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('不能为空且长度不能大于' + length);
                        flag = false;
                    } else {
                        $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                        $(this).siblings('.help-block').html('');
                    }
                } else if ($(this).hasClass('confirm_pswValid')) {
                    if (valueLen == '') {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('不能为空');
                        flag = false;
                    } else {
                        var psw = $('.pswValid').val();
                        if (psw != valueLen) {
                            $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                            $(this).siblings('.help-block').html('两次输入的密码不一致');
                            flag = false;
                        } else {
                            $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                            $(this).siblings('.help-block').html('');
                        }
                    }
                } else if ($(this).hasClass('validateIdCard')) {
                    var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;

                    //如果通过该验证，说明身份证格式正确，但准确性还需计算
                    if (regIdCard.test(valueLen)) {
                        if (valueLen.length == 18) {
                            var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); //将前17位加权因子保存在数组里
                            var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
                            var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
                            for (var i = 0; i < 17; i++) {
                                idCardWiSum += valueLen.substring(i, i + 1) * idCardWi[i];
                            }
                            var idCardMod = idCardWiSum % 11;//计算出校验码所在数组的位置
                            var idCardLast = valueLen.substring(17);//得到最后一位身份证号码
                            //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
                            if (idCardMod == 2) {
                                if (idCardLast == "X") {
                                    $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                                    $(this).siblings('.help-block').html('');
                                } else {
                                    $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                                    $(this).siblings('.help-block').html('身份证号码错误');
                                    flag = false;
                                }
                            } else {
                                //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
                                if (idCardLast == idCardY[idCardMod]) {
                                    $(this).closest('.form-group').removeClass('has-error').addClass('has-success');
                                    $(this).siblings('.help-block').html('');
                                } else {
                                    $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                                    $(this).siblings('.help-block').html('身份证号码错误');
                                    flag = false;
                                }
                            }
                        }
                    } else if (valueLen == '') {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('身份证号码不能为空');
                        flag = false;
            
                    } else {
                        $(this).closest('.form-group').removeClass('has-success').addClass('has-error');
                        $(this).siblings('.help-block').html('身份证格式不正确');
                        flag = false;
              
                    }
        
                }

         }

    })

    return flag;
}