jQuery.validate插件

最新推荐文章于 2022-11-27 20:12:49 发布
原创最新推荐文章于 2022-11-27 20:12:49 发布 · 208 阅读
CC 4.0 BY-SA版权
博客围绕jQuery.validate插件展开，虽未给出具体内容，但可推测会涉及该插件在前端开发中的应用等相关信息技术内容。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/jquery-1.11.1.js"></script>
    <script src="./dist/jquery.validate.js"></script>
    <script src="./dist/localization/messages_zh.js"></script>
    <script>
        $.validator.setDefaults({
            submitHandler:function (form) {
                alert('提交');
                form.submit(form);
            }
        })

        //errorClass string 指定错误提示的css类名，可以自定义错误提示的样式 error
        //errorElement string 用什么标签标记错误，默认是label，可以改成em  label
        //errorContainer selector 显示或者隐藏验证信息，可以自动实现错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大
        //errorLabelContainer selector 把错误信息统一放在一个容器里面
        //wrapper string 用什么标签再把上边的errorElement包起来


        $().ready(function () {
            $('#form1').validate({
                errorPlacement:function (error,element) {
                    $(element).closest('form').find('label[for='+element.attr('id')+']').append(error);
                },
                //异步验证
                // 使用ajax的方式进行验证--异步，默认会提交给后面的远程地址，需要提交其他值可以使用data  远程地址只能返回true和false
                remote: {
                    url: 'check-email.php',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        username: function () {
                            return $('#username').val();
                        }
                    }
                },
                errorElement:'span',
                errorContainer:'div.error',
                errorLabelContainer:$('#form1 div.error'),
                wrapper:'li',
                //每个字段通过验证后的动作
                success:function (label){
                  label.html('&nbsp;').addClass('checked');
                },
                messages:{
                    user:{
                        required:'必须字段',minlength:'不能少于3个字母'
                    },
                    password:{
                        required:'必须字段',minlength:'不能少于5个大于十二个',maxlength:'不能少于5个大于十二个'
                    }
                }
            })

            // 重置表单
            $('.cancel').click(function () {
                validator.resetForm();
            })

            //验证的触发方式的修改                                       默认
            /**onsubmit boolean 提交时验证，设置false，就用其他的方法验证 true
             * onfocusout boolean 失去焦点时验证（不包括复选框/单选按钮）
             * onkeyup boolean 在keyup时验证 true
             * onclick boolean 在点击复选框和单选按钮时验证 true
             * focusInvalid boolean 提交表单后，未通过验证的表单，（第一个或提交之前获得焦点的未通过验证的表单会获取焦点） true
             * focusCleanup boolean 如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和focusInvalid一起使用。 false
              */


            //添加自定义校验方式
            //自定义添加的方法要写在固定的js文件中，/dist/additional-methods.js或者/dist/jquery.validate.js
            //要在dist/localization/messages_zh.js中添加提示语句，并在调用前添加对additional-methods.js的引用
            jQuery.validator.addMethod('byteRangeLength',function (value,element,param) {
                var length=value.length;
                for(var i=0;i<value.length;i++) {
                    if (value.charCodeAt(i) > 127) {
                        length++;
                    }
                }
                //表单不为空时才触发验证
                return this.optional(element)||(length>=param[0]&&length<=param[1]);
            }),$.validator.format('请确保输入的值在{0}-{1}个字节之间（一个中文算两个字节）');

            //邮政编码验证
            jQuery.validator.addMethod('isZipCode',function (value, element) {
                var tel=/^[0-9]{6}$/;
                return this.optional(element)||(tel.test(value));
            },'请正确填写您的邮政编码');







        })
    </script>
    <style>
        /*设置错误提示的样式，可以增加图标显示，在该系统中建立了一个validation.css，*/
        input.error{
            border: 1px solid #a81826;
        }
        label.error{
            background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
            padding-bottom: 2px;
            font-weight: bold;
            color: #a81826;
        }
        label.checked{
            background: url("./demo/images/checked.gif") no-repeat 0px 0px;
        }
    </style>
</head>
<body>
//radio中的required表示必须选一个
<input type="radio" id="gender_male" value="m" name="gender" required>
<input type="radio" name="gender" id="gender_female" value="f"><br>
//checkbox中的required表示必须选中
<input type="checkbox" name="agree" id="agree" class="checkbox" required><br>
//表示选中的最小个数，minlength表示2
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2">
<input type="checkbox" class="checkbox" id="spam_phone" value="email" name="spam[]" required>
<input type="checkbox" class="checkbox" id="spam_mail" value="email" name="spam[]" required><br>
//required表示选中的value不能为空,悬浮显示title
<select name="fruit" id="fruit" title="please select at least two first" class="{required:true,minlength:2}" multiple="multiple">
    <option value=""></option>
    <option value="a">apple</option>
    <option value="b">banana</option>
    <option value="c">ck</option>
    <option value="d">drug</option>
</select>
    <form method="post" class="cmxform" id="form1" action="">
        <fieldset>
            <legend>login form</legend>
            <p>
                <label for="user">username</label>
                <input type="text" id="user" name="user" required minlength="3">
            </p>
            <p>
                <label for="password">密码</label>
                <input type="password" name="password" id="password" required minlength="5" maxlength="12">
            </p>
            <p>
                <input type="submit" value="login" class="submit">
            </p>
        </fieldset>
    </form>
</body>
</html>