jQuery的validate插件
博客专区 > GusFring 的博客 > 博客详情
jQuery的validate插件
GusFring 发表于5个月前
jQuery的validate插件
  • 发表于 5个月前
  • 阅读 10
  • 收藏 0
  • 点赞 1
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

 

http://www.runoob.com/jquery/jquery-plugin-validate.html

链接中已经包含了大部分的使用规则,这里记录下一些常见的用法

1.提示变红

<style>
    .error {
        color: red;
    }
</style>

2.自定义提示位置

默认的错误信息提示是在根据name选定的元素的后面添加,所以在这里自定义位置的时候只要在想要的位置上添加即可,此时在script中不需要添加校验规则。

                <div class="form-group opt">
                    <label for="sex1" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-6">
                        <label class="radio-inline"> <input type="radio" name="sex" id="sex1" value="male" checked="checked"> 男 </label>
                        <label class="radio-inline"> <input type="radio" name="sex" id="sex2" value="female"> 女 </label>
                        <label class="error" for="sex" style="display: none">您没有第三种选择</label>
                    </div>
                </div>

3.自定义校验规则(以用户名是否存在的校验位例)


    $.validator.addMethod(
        //规则名称
        "checkUsername",
        //校验的函数
        function (value, element, params) {
            //value: 输入的内容
            //element:被校验的元素对象
            //params:规则对应的参数值
            //mark一下
            var flag = true;

            //ajax校验
            $.ajax({
                url: "${pageContext.request.contextPath}/checkUsername",
                async: false,
                data: {"username": value},
                type: "POST",
                dataType: "json",
                success: function (data) {
                    flag = !data.isExist;
                }
            });
            return flag;
        }
    );

    $(function () {
        $("#registerForm").validate({
            rules: {
                "username": {
                    "checkUsername": true
                }
              },
            messages: {
                "username": {
                    "checkUsername": "用户名已经存在"
                }
            }
        });
    });

值得注意的一点是: async: 一定要设置为false,否则,ajax函数对于flag是没有意义的,因为回调函数作为入参的话,异步提交的方式会直接返回flag之后,再进行ajax函数调用,当设置为非异步,会等回调函数执行完毕在进行flag的返回。

共有 人打赏支持
粉丝 9
博文 33
码字总数 14720
×
GusFring
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: