WEB - JS - 表单验证

【 应用的插件 】

<!-- css: bootstrap -->
<link type="text/css" rel="stylesheet" href="../plugs/form-validation/jqueryValidate/bootstrap.min.css">

<!-- js  -->
<!-- jquery -->
<script src="../plugs/form-validation/jqueryValidate/jquery-3.1.1.js"></script>
<!-- bootstrap  -->
<script type="text/javascript" src="../plugs/form-validation/jqueryValidate/bootstrap.min.js" /></script>

<!-- jquery.validate -->
<script src="../plugs/form-validation/jqueryValidate/jquery.validate.min.js"></script>
<script src="../plugs/form-validation/jqueryValidate/messages_zh.js"></script>
<!-- jquery-validate.bootstrap-tooltip  -->
<script src="../plugs/form-validation/jqueryValidate/jquery-validate.bootstrap-tooltip.min.js"></script>

【 自定义的JS 】

<script type="text/javascript">
        $(function() {
            
            //给对应ID的表单绑定校验事件；
            $("#teacher_update").validate({
                debug : true, //调试模式取消submit的默认提交功能   
                onkeyup: true, //取消在用户输入过程中的实时校验
                focusInvalid: true , // 焦点自动定位到第一个无效元素
                focusCleanup: true, // 元素获取焦点时清除错误信息
                
                //绑定校验规则；
                rules : {
                    teacher_jno : {
                        required : true, 
                        digits : true,
                        minlength : 8,
                        maxlength : 8
                    },
                    teacher_name : {
                        required : true,
                        checkSpecialChar:true,
                        minlength : 2,
                        maxlength : 8
                    },
                    teacher_acc : {
                        required : true, //绑定 内置校验规则；
                        checkSpecialChar:true, //绑定 自定义校验规则；
                        rangelength : [ 8, 12 ]
                    },
                    teacher_pwd : {
                        required : true,
                        checkSpecialChar:true,
                        rangelength : [ 8, 12 ]
                    },
                    teacher_email : {
                        required : true,
                        email : true
                    }
                },
                
                //出错信息提示设置，有默认的；
                messages : {
                    teacher_jno : {
                        required : '未填',
                        digits:'限制:8位数字',
                        minlength : '限制:8位数字',
                        maxlength: '限制:8位数字',
                    },
                    teacher_name : {
                        required : '未填',
                        minlength : '限制:2-8个非特殊字符'
                    },
                    teacher_acc : {
                        required : '未填',
                        rangelength : '限制:8-12个非特殊字符'
                    },
                    teacher_pwd : {
                        required : '未填',
                        rangelength : '限制:8-12个非特殊字符'
                    },
                    teacher_email : {
                        required : '未填',
                        email : ' 邮箱格式错误'
                    }

                },
                
                // 展示错误，使用jquery-validate.bootstrap-tooltip.min.js插件
                tooltip_options: {
                    teacher_jno: {
                        placement: 'top',
                        //trigger:'focus',//其他属性设置 - 未知！
                        //html:true
                    },
                    teacher_name: {
                        placement: 'right'
                    },
                    teacher_acc: {
                        placement: 'right'
                    },
                    teacher_pwd: {
                        placement: 'right'
                    },
                    teacher_email: {
                        placement: 'right'
                    }
                }

            });

            //自定义校验规则：判断是否为特殊字符；格式：jQuery.validator.addMethod("",function(){},"");
            jQuery.validator.addMethod("checkSpecialChar", function(value, element) {
                var pattern = new RegExp("[.`~!@#$^&*=|{}':;',\\[\\]<>《》/?~！@#￥……&*|{}【】‘；：”“'。，、？' ']");
                var reg = /^([0-9]+)$/;
                if(pattern.test(value)) {
                    return false;
                } else if(value.indexOf(" ") != -1){
                    return false;
                } else {
                    return true;
                }
            }, "禁止输入特殊字符及空格");
            
            //远程校验：ajax；
            //暂时没有
            
        });
    </script>

 

【  HTML  】 

<form id="teacher_update" >

                <!-- 表单校验应用 -->
                
                <h3><small>只能输入8个数字</small></h3>
                <label for="teacher_jno">工号</label> 
                    <input id="teacher_jno" name="teacher_jno" type="text"><br>
                    
                <h3><small>只能输入2-8个非特殊字符</small></h3>
                <label for="teacher_name">姓名</label> 
                    <input id="teacher_name" name="teacher_name" type="text"> <br>
                    
                <h3><small>只能输入8-12个非特殊字符</small></h3>
                <label for="teacher_acc">账号</label>
                    <input id="teacher_acc" name="teacher_acc" type="text"><br>
            
                <h3><small>只能输入8-12个非特殊字符</small></h3>
                <label for="teacher_pwd">密码</label> 
                    <input id="teacher_pwd" name="teacher_pwd" type="password"> <br>
                
                <h3><small>只能输入email格式</small></h3>
                <label for="teacher_email">Email</label> 
                    <input id="teacher_email" name="teacher_email" type="email"><br>

                <input type="submit" value="submit"><br>

            </form>