最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jQuery+css3表单验证

来源:http://www.erdangjiade.com/ 二当家的 2015-04-26 16:11浏览(1557)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery+css3表单验证
分类:表单代码 > 表单插件 难易:初级
查看演示 下载资源: 126

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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() {}
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/85.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2