KISSYUI的表单前端js验证和JQuery扩展插件Validate
转载自：玉米串
和http://www.cnblogs.com/best/archive/2011/09/05/2167817.html
KISSY：小巧灵活、简洁实用、愉悦编码、快乐开发。KISSY的原则，确实如此。刚刚做了个注册页面，用到了KISSY的表单验证组件Validation。
上例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
<meta name="keywords" content="玉米串,umtry.com" />
<meta name="description" content="玉米串,umtry.com" />
<meta name="generator" content="UMTRY.COM v1.0" />
<meta name="author" content="umtry.com" />
<meta name="copyright" content="2011-2099 umtry.com" />
<script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script>
</head>
<body>
<div class="register">
<div class="title">用户注册</div>
<form action="member.php?mod=register&do=doregister" method="post" name="" id="reg_form">
<table class="regtab">
<tr>
<td class="r"><span>*</span>账号：</td><td class="l"><input type="text" name="username" id="username" /></td><td></td>
</tr>
<tr>
<td class="r"><span>*</span>密码：</td><td class="l"><input type="password" name="pwd" id="pwd" /></td><td></td>
</tr>
<tr>
<td class="r"><span>*</span>确认密码：</td><td class="l"><input type="password" name="rpwd" id="rpwd" /></td><td></td>
</tr>
<tr>
<td class="r"><span>*</span>真实姓名：</td><td class="l"><input type="text" name="realname" id="realname" /></td><td></td>
</tr>
<tr>
<td class="r">性别：</td>
<td class="l">
<select name="sex">
<option value="s">保密</option>
<option value="f">女</option>
<option value="m">男</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td class="r">Email：</td><td class="l"><input type="text" name="email" id="email" /></td><td></td>
</tr>
<tr>
<td class="r">出生日期：</td><td class="l"><input type="text" name="birdate" id="birdate" /></td><td></td>
</tr>
<tr>
<td class="r">所在学校：</td><td class="l"><input type="text" name="school" /></td><td></td>
</tr>
<tr>
<td class="r">所在班级：</td><td class="l"><input type="text" name="class" /></td><td></td>
</tr>
<tr>
<td class="r">学校详细地址：</td><td class="l"><input type="text" name="saddress" /></td><td></td>
</tr>
<tr>
<td class="r">个人简介：</td><td class="l"><textarea name="intro"></textarea></td><td></td>
</tr>
<tr class="n">
<td></td><td><input type="submit" name="sub1" value="提交" /> <input type="checkbox" name="" />同意网站服务条款</td><td></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
KISSY.use("validation",function(S,Validation){
var regform = new Validation('#reg_form',{
style:"under"
});
regform.add("#username",{
length:[6,30,true], //账号长度6-30个字符
remote:['ajax.php?mod=member&ado=verify_username'] //ajax方式判断账号是否被占用
});
regform.add("#pwd",{
length:[6,30,true] //密码长度6-30个字符
});
regform.add("#rpwd",{
equalTo:['#pwd'] //确认密码=密码
});
regform.add("#realname",{
chinese:['真实姓名只能是中文'] //姓名必须是中文
});
regform.add("#email",{ //判断Email格式
required:false,
email:['请填写正确的email哦']
});
S.Event.on("#reg_form","submit",function(ev){ //点击submit再次js方式验证必填字段
var isValid = regform.isValid();
if(!isValid){
return false;
}
});
});
KISSY.use("node,calendar,calendar/assets/base.css",function(S,Node,Calendar){ //这个是日历组件
new S.Calendar('#birdate',{ //出生日期字段
popup:true,
triggerType:['click'],
closable:true
}).on('select',function(e){
Node.one('#birdate').val(S.Date.format(e.date,'isoDate'));
});
});
</script>
</body>
</html>
JQuery扩展插件validate:
jquery.validate是基于jquery的一个B/S客户端验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,大大提高了开发效率，下面是本人做的学习笔记：
| JQuery扩展插件Validate—1基本使用方法 |
| JQuery扩展插件Validate—2通过参数设置验证规则 |
| JQuery扩展插件Validate—3通过参数设置错误信息 |
| JQuery扩展插件Validate—4设置错误提示的样式 |
| JQuery扩展插件Validate—5添加自定义验证方法 |
| JQuery扩展插件Validate—6radio、checkbox、select的验证 |
示例源码下载
