jQuery的validate插件

 

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的返回。