较酷的表单验证(jQuery+css3)

浏览:2594 发布日期:2015/04/28 分类:用法示例 关键字: 表单验证
今天发现了一款很酷的表单验证插件,来分享给大家。


页面底部有演示、免费下载链接。若是想看更多js特效网站源码js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、
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>
2、
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() {} 
});
查看该特效演示及免费下载,请访问【素材火】:http://www.sucaihuo.com/js/85.html
评论( 相关
后面还有条评论,点击查看>>