cmstop采用xml验证表单,这样可以顺利通过w3c验证,此验证只针对form。
§ 文件
public/img/js/lib/jquery.js
public/img/js/lib/cmstop.validator.js
§ 规范
form元素定义name,以定位xml文件
xml文件放在可访问的目录,确保不跨域
input,select,textarea等需要验证的元素上定义name
如果元素的name含有“[]”这样的字符,在编写规则时去除特殊字符
§ XML规则文件
<path>/apps/app/validators/<form_name>.xml
规则文件的存储路径<path>是可指定的,默认情况下位于当前访问入口下的 apps/目录,如你现在的入口是在后台操作book应用,则默认路径为:
public/admin/apps/book/validators/
当然,这个位置是可以改变和设置的,如果不是默认路径,设置方法为:
<script type="text/javascript">
$.validate.setConfigs({
xmlPath:newPath;
});
</script>
§ XML编写规则
根节点包括 很多字段(表单name值) 字段包括很多rule(验证方法)
字段上有tips,pass
rule上有event,args,textContent
<?xml version="1.0" encoding="UTF-8"?>
<root>
<fieldName1 tips="" pass="">
<rule1>错误信息</rule1>
<rule2 args="验证参数" event="响应事件">错误事件</rule2>
</fieldName1>
<fieldName2 tips="" pass="">
<rule1>错误信息</rule1>
<rule2 args="验证参数" event="响应事件">错误事件</rule2>
</fieldName2>
</root>
fieldName对应表单元素的name
tips:表单聚焦时的提示信息
pass:表单验证通过信息
event: 响应的事件 可用:blur submit change
1.响应单个事件event="blur" 多个事件 event="blur submit" (以空格分隔)
2.event="" 或者 其他未列举的值 则不响应任何事件
3.如果 [没有给event属性] 等同于 event="blur submit"
4.event="*" 则 等同于 event="blur change submit"
args: 传递给验证方法的参数
目前regex, not, min, max, ajax 需要参数,其各自参数代表意思
<regex>args:正则表达式 eg. /regex/i, #regex#m, |regex|g 边界只允许<#,|,/>分隔 匹配模式只有(i、m、g)
<not>args: 不允许的值 多个不允许的值以逗号‘,’分隔
<min,max>args:数字,顾名思义
<ajax>args:异步验证其值 的url地址,(注:url中&以&代替)
§ 绑定到FORM
$('form').validate({
submitHandler:function(jqform){jqform.submit()}
});
§ 示例
1、html表单
<form name="book_add" >
<input type="text" name="username"/>
<input type="password" name="passwd"/>
<input type="radio" name="gender" value="1"/><label>男</label>
<input type="radio" name="gender" value="2"/><label>女</label>
<form>
2、给表单绑定验证
<script type="text/javascript" src="<?=IMG_URL?>js/lib/jquery.js"></script>
<script type="text/javascript" src="<?=IMG_URL?>js/lib/cmstop.validator.js"></script>
<script type="text/javascript">
$.validate.setConfigs({
xmlPath:apps/book/validators/
});
$('book_add').validate({
submitHandler:function(jqform){jqform.submit()}
});
</script>
3、编写XML文件
public/admin/apps/book/validators/book_add.xml
规则内容
<?xml version="1.0" encoding="UTF-8"?>
<root>
<username tips="填写用户名">
<required event="submit">必填字段</required>
<min args="3">名称不能少于3个字符</min>
<username>不得少于三个字符,以a-zA-Z开头 后面可以1-9a-zA-Z\-_</username>
</username>
<passwd tips="填写密码">
<password>6-20位字符,不包含空格和$</password>
</passwd>
<gender>
<required event="submit">必选</required>
</gender>
</root>
注意
确保访问请求和book_add.xml为同一个域下,不能跨域请求。
§ 附注
内置验证规则
规则/方法 |
参数 |
说明 |
required |
无 |
必填字段 |
not |
不允许的值 |
多个不允许的值以逗号‘,’分隔 not验证 |
min |
数字 |
最小长度验证 |
max |
数字 |
最大长度验证 |
ajax |
URL地址 |
异步验证其值 的url地址,(注:url中&以&代替)ajax验证 |
regex |
正则表达式 |
eg. /regex/i, #regex#m, 边界只允许<#,|,/>分隔 匹配模式只有(i、m、g) regex验证 |
|
无 |
email验证 |
username |
无 |
username验证(a-zA-Z开头 后面是word) |
password |
无 |
密码长度6-20 ,不允许包含 空格 和 $ |
ip |
无 |
IP验证,000.000.000.000格式 |
id |
无 |
身份证号码验证 15-18位 |
date |
无 |
格式1986/12/09 1986-12-09 1986-1-8 |
datetime |
无 |
格式(1986-12-09 11:11:11)/(1986/12/09 11:11:11) |
|
无 |
qq号码验证 |
mobile |
无 |
手机号码 |
telephone |
无 |
座机号码 |
msn |
无 |
email格式 |
url |
无 |
url格式 |
zipcode |
无 |
不以0开头的6位数字 |
currency |
无 |
货币格式 12.00 |
number |
无 |
number验证 数字 |
english |
无 |
英文字母a-zA-Z |
chinese |
无 |
汉字验证 |
integer |
无 |
整数 可以-/+开头 |
float |
无 |
浮点类型 可以-/+开头 |