jQuery+css3表单验证

收藏

今天发现了一款很酷的表单验证插件，来分享给大家。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们在页面上放置常用的表单元素：

<dt>用户名：</dt><dd><input type="text" name="name" class='input'/></dd>
<dt>密码：</dt><dd><input type="text" name="pwd" class='input'/></dd>
<dt>确认密码：</dt><dd><input type="text" name="pwd1" class='input'/></dd>
<dt>电子邮件：</dt><dd><input type="text" name="email" class='input'/></dd>
<dt>年龄：</dt><dd><input type="text" name="age" class='input'/></dd>
<dt> </dt><dd><button type="submit" class='btn'>提交</button></dd>

jQuery

dbg = function(text) {
    $("#debug").html(text + "");
}
var inputs = [{
    name: "name",
    type: "chn",
    focusMsg: '中文',
    errorMsg: "您的大名",
    rightMsg: "填写正确",
    ajax: {
        url: "/home/ajax",
        errorMsg: "用户已存在",
        successMsg: "用户名可以注册！"
    }
},
{
    name: "pwd",
    type: 'eng',
    focusMsg: '英文',
    rightMsg: "填写正确",
},
{
    name: "pwd1",
    type: 'eq',
    errorMsg: "不匹配",
    eqto: 'pwd'
},
{
    name: "email",
    type: "email",
    focusMsg: '常用邮箱',
    rightMsg: "填写正确"
},
{
    name: "age",
    between: [18, 78],
    focusMsg: '18< >78'
}];

var regulars = {
    "email": [/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/, "邮箱格式不对"],
    "username": [/^[#]/, "不能这样写"],
    "password": [/(lw)$/, "我要发火了"],
    "eng": [/^[A-Za-z]+$/, "只能输入英文"],
    "chn": [/^[\u0391-\uFFE5]+$/, "只能输入汉字"]
}

$("#ajax").checkInput({
    inputs: inputs,
    beforeSubmit: function() {}
});