# 表單驗證
我們對表單的驗證進行了非常巧妙的支持,大多數時候你只需要在表單元素上加上 lay-verify="" 屬性值即可。如:
~~~
<input type="text" lay-verify="email">
還同時支持多條規則的驗證,如下:
<input type="text" lay-verify="required|phone|number">
~~~
上述對輸入框定義了一個郵箱規則的校驗,它會在 form 模塊內部完成。目前我們內置的校驗支持見上文的:預設元素屬性
除了內置的校驗規則外,你還可以自定義驗證規則,通常對于比較復雜的校驗,這是非常有必要的。
~~~
form.verify({
username: function(value, item){ //value:表單的值、item:表單的DOM對象
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '用戶名不能有特殊字符';
}
if(/(^\_)|(\__)|(\_+$)/.test(value)){
return '用戶名首尾不能出現下劃線\'_\'';
}
if(/^\d+\d+\d$/.test(value)){
return '用戶名不能全為數字';
}
}
//我們既支持上述函數式的方式,也支持下述數組的形式
//數組的兩個值分別代表:[正則匹配、匹配不符時的提示文字]
,pass: [
/^[\S]{6,12}$/
,'密碼必須6到12位,且不能出現空格'
]
});
~~~
當你自定義了類似上面的驗證規則后,你只需要把 key 賦值給輸入框的 lay-verify 屬性即可:
~~~
<input type="text" lay-verify="username" placeholder="請輸入用戶名">
<input type="password" lay-verify="pass" placeholder="請輸入密碼">
~~~
## 預設元素屬性
事實上在使用表單時,你的一半精力可能會在元素本身上。所以我們把一些基礎屬性的配置恰恰安放在了標簽本身上。如:
~~~
<input type="text" lay-verify="email">
<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">
<button lay-submit>提交</button>
~~~
上述的lay-verify、lay-skin、lay-filter、lay-submit神馬的都是我們所說的預設的元素屬性,他們可以使得一些交互操作交由form模塊內部、或者你來借助form提供的JS接口精確控制。目前我們可支持的屬性如下表所示:
http://www.layui.com/doc/modules/form.html#attr