表单验证

基于jquery

html部分

<span class="dz-intro"><sup>*</sup>QQ:</span>
<input type="number" name="qq" data-minlength="5" data-maxlength="11" data-error="qq格式不正确">
<span class="dz-title"></span>

js部分

$(function () {
                        $("input").blur(function () {
                            var minlength=$(this).attr('data-minlength')
                            var maxlength=$(this).attr('data-maxlength')
                            var error=$(this).attr('data-error')
                            check($(this),minlength,maxlength,error)

                        })
                        //密码 验证安全等级 一个任意字符 pw-weak  数字+字母+6个 pw-medium  数字+字母+特殊符号+大写+8位 pw-strong
                        $("input[name='password']").on('input',function () {
                            var type=0;
                            var password=$(this).val()
                            var hasxiaoxie= /[a-z]+/; //小写字母
                            var hasdaxie= /[A-Z]+/; //大写字母
                            var hasnumber= /[0-9]*/; //数字
                            var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
                                regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
                            if (hasxiaoxie.test(password)){
                                type++
                            }
                            if (hasdaxie.test(password)){
                                type++
                            }
                            if (hasnumber.test(password)){
                                type++
                            }
                            if (regEn.test(password)||regCn.test(password)){
                                type++
                            }
                            if(type==0){$('.pw-strength').attr('class','pw-strength');return}
                            if(type==1){$('.pw-strength').attr('class','pw-strength pw-weak');return}
                            if(type==2||type==3){
                                if(password.length>=6){
                                    $('.pw-strength').attr('class','pw-strength pw-medium');return
                                }else{
                                    $('.pw-strength').attr('class','pw-strength  pw-weak');return
                                }
                            }
                            if(type==4){
                                if(password.length>=8){
                                    $('.pw-strength').attr('class','pw-strength pw-strong');return
                                }else{
                                    $('.pw-strength').attr('class','pw-strength  pw-medium');return
                                }
                            }

                        })
                        $('input').focus(function (e) {
                            $(this).removeClass('error')
                            $(this).next().removeClass('error')
                            var error=$(this).attr('data-error')
                            if(error){$(this).next().html('')}
                        })
                    })
                    //input对象  最小长度 最大长度  错误提示
                    function check(obj,minlength,maxlength,error) {
                        var value=obj.val()
                        if(value.length<minlength||value.length>maxlength){
                            obj.addClass('error')
                            obj.next().addClass('error')
                            if(error){obj.next().html(error)}
                        }
                    }