jQuery+css3表单验证

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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() {}
});