使用validator.js对字符串数据进行验证

JavaScript026

使用validator.js对字符串数据进行验证,第1张

validator.js是一个对字符串进行数据验证和过滤的工具库,同时支持Node端和浏览器端,github地址是 https://github.com/chriso/validator.js

主要API如下:

验证str中是否含有seed

验证是否相等

验证str是否是一个指定date之后的时间字符串,默认date为现在,与之相反的是isBefore方法

检查是否是布尔值

检查是否是信用卡

检查str是否是一个可以被number整除的数字

检查是否是邮件地址

检查字符串是否为空

是否是域名

是否是浮点数

是否是哈希值

是否是十六进制颜色值,例如#ffffff

是否是十六进制数字

是否是IP地址值,version为4或者6

是否是ISBN号,version为10或者13

是否是整数

使用JSON.parse判断是否是json

判断字符串的长度是否在一个范围内,options默认为{min:0, max: undefined}

是否小写

是否是MAC地址

是否是MD5加密的哈希值

是否是MIME type值

是否是MongoDB的id值

是否仅仅包含数字

是否是一个端口号

是否是一个URL地址

是否大写

是否匹配,利用match方法,其中匹配的模式可以作为第三个参数,当然也可以卸载正则表达式pattern中

移除黑名单中的字符

对< > & ' " /进行HTML转义,与之相反的方法是unescape

对字符进行左缩进,与之对应的右缩进为rtrim方法,两端缩进trim

此外还有toBoolean、toDate、toFloat、toInt、whitelist

validator.js remote 返回类型是根据表单比较的结果一般是返回字符串类型。

有时候不仅仅对表单所录入的信息进行验证还需要将录入的值与数据库进行比较,这时就需要借助remote方法来实现。以下介绍 jquery.validate.js的后台验证的remote方法,准备工作,前台页面:

<script src="test/jquery.js" type="text/javascript"></script>

<script src="test/jquery.validate.js" type="text/javascript"></script>

<script src="test/jquery.validate.message_cn.js" type="text/javascript"></script>

</head>

<body>

<form name="test" id="testform" method="get" action="get.php">

<fieldset>

  <legend title="用户注册(User Register)">用户注册(User Login)</legend>

   <p>

       <label for="name">用户名:</label>

       <input id="name" name="name" type="text" />

   </p>

   <p>

       <label for="mail">邮箱:</label>

       <input id="mail" name="mail" type="password" />

   </p>

   <p>

       <label for="password">密码:</label>

       <input id="password" name="password" type="password" />

   </p>

   <p>

       <label for="repassword">重复密码:</label>

       <input id="repassword" name="repassword" type="password" />

   </p>

   <p>

       <label for="hash">邀请码:</label>

       <input id="hash" name="hash" type="text" />

   </p>

<p>

       <label for="sel">选择:</label>

<select id="sel" name="sel">

<option value="">请选择</option>

<option value="1">选择1</option>

<option value="2">选择2</option>

<option value="3">选择3</option>

<option value="4">选择4</option>

</select>

   </p>

   <p>

       <label for="type">用户类型:</label>

       <span><input  name="type" type="radio" value="1" />类型1</span>

       <span><input  name="type" type="radio" value="2" />类型2</span>

       <span><input  name="type" type="radio" value="3" />类型3</span>

   </p>

   <p>

    <label for="submit">&nbsp</label>

    <input class="submit" type="submit" value="注册"/>

   </p>

   </fieldset>

</form>

要实现的效果:

验证代码:

<script type="text/javascript">

$(function(){

$("#testform").validate({

rules : {

            name : {

                    required : true

            },

            password: {

        required: true,

        minlength: 5

    },

    repassword: {

        required: true,

        minlength: 5,

        equalTo: "#password"

    },

    hash: {

        required: true,

        remote: 'checkhash.php'

    },

    sel: {

        remote: 'checksel.php'

    },

    type: {

        remote:{

            url: "changeusertype.php",

            type: "get",

            dataType: 'json',

        data: {

            'type': function(){return $('input[name="type"]:checked').val()}

            }

    }

        }

    },

    messages : {

        name : {

                required : '必填'

        },

        password: {

    required: '必填',

    minlength: '最少5个字符'

},

repassword: {

    required: '必填',

    minlength: '最少5个字符',

    equalTo: '两次输入的密码不一样'

},

hash: {

    required: '必填',

    remote: '邀请码不正确'

},

sel: {

    remote: '选择不正确'

},

type: {

    remote: '类型不可更改'

}

    },

focusInvalid: true,

    /*指定错误信息位置*/

errorPlacement: function (error, element) {

           error.appendTo(element.closest("p"))

},

//设置错误信息存放标签

errorElement: "em",

    submitHandler: function(form) {

}

    })

})

</script>

验证结果如下: