多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# validator表单验证 官方<https://github.com/jaywcjlove/validator.js> ``` <pre class="calibre14">``` var validator <span class="token">=</span> <span class="token5">new</span> <span class="token1">Validator</span><span class="token2">(</span><span class="token4">'form1'</span><span class="token2">,</span><span class="token2">[</span> <span class="token2">{</span> name<span class="token2">:</span> <span class="token4">'openid'</span><span class="token2">,</span> display<span class="token2">:</span><span class="token4">"不能为空|必须正数"</span><span class="token2">,</span> regexp_num<span class="token2">:</span><span class="token">/</span><span class="token">^</span><span class="token2">[</span><span class="token3">0</span><span class="token">-</span><span class="token3">9</span><span class="token2">]</span><span class="token">+</span>$<span class="token">/</span><span class="token2">,</span> rules<span class="token2">:</span> <span class="token4">'required|regexp_num'</span> <span class="token2">}</span> <span class="token2">]</span><span class="token2">,</span><span class="token5">function</span><span class="token2">(</span>obj<span class="token2">,</span>evt<span class="token2">)</span><span class="token2">{</span> <span class="token5">if</span><span class="token2">(</span>obj<span class="token2">.</span>errors<span class="token2">.</span>length<span class="token">></span><span class="token3">0</span><span class="token2">)</span><span class="token2">{</span> var error_str <span class="token">=</span> <span class="token4">''</span><span class="token2">;</span> <span class="token5">for</span> <span class="token2">(</span>var i <span class="token">=</span> <span class="token3">0</span><span class="token2">;</span> i <span class="token"><</span> obj<span class="token2">.</span>errors<span class="token2">.</span>length<span class="token2">;</span> i<span class="token">++</span><span class="token2">)</span> <span class="token2">{</span> error_str <span class="token">=</span>obj<span class="token2">.</span>errors<span class="token2">[</span>i<span class="token2">]</span><span class="token2">.</span>message<span class="token2">;</span> obj<span class="token2">.</span>errors<span class="token2">[</span>i<span class="token2">]</span><span class="token2">.</span>element<span class="token2">.</span><span class="token1">setAttribute</span><span class="token2">(</span><span class="token4">'style'</span><span class="token2">,</span> <span class="token4">'border:1px solid red'</span><span class="token2">)</span> <span class="token1">alert</span><span class="token2">(</span>error_str<span class="token2">)</span><span class="token2">;</span><span class="token5">return</span> <span class="token3">false</span><span class="token2">;</span> <span class="token2">}</span> <span class="token2">}</span> <span class="token2">}</span><span class="token2">)</span> validator<span class="token2">.</span><span class="token1">validate</span><span class="token2">(</span><span class="token2">)</span><span class="token2">;</span><span class="token6">//验证失去焦点</span> ``` ``` - `name` -> input 中 `name` 对应的值 - `display` -> 验证错误要提示的文字 `{{这个中间是name对应的值}}` - `rules` -> 一个或多个规则(中间用`|`间隔) - `is_email` -> 验证合法邮箱 - `is_ip` -> 验证合法 ip 地址 - `is_fax` -> 验证传真 - `is_tel` -> 验证座机 - `is_phone` -> 验证手机 - `is_url` -> 验证URL - `is_money` -> 金额格式验证 - `is_english` -> 字母验证 - `is_chinese` -> 中文验证 - `is_percent` -> 验证百分比 - `required` -> 是否为必填 - `max_length` -> 最大字符长度 - `min_length` -> 最小字符长度 - `same(field)` -> 指定字段内容是否相同 - `different(field)` -> 拒绝与某个字段相等,比如登录密码与交易密码情况 - `contains(field)` -> 直接判断字符串是否相等 - `accepted(field)` -> 用于服务条款,是否同意时相当有用,不限制checkbox与radio,有可能submit button直接附带value情况 ``` <pre class="calibre16">``` <span class="token2">{</span> <span class="token6">//name 字段</span> name<span class="token2">:</span> <span class="token4">'email'</span><span class="token2">,</span> display<span class="token2">:</span><span class="token4">"你输入的不{{email}}是合法邮箱|不能为空|太长|太短"</span><span class="token2">,</span> <span class="token6">// 验证条件</span> rules<span class="token2">:</span> <span class="token4">'is_email|max_length(12)'</span> <span class="token6">// rules: 'valid_email|required|max_length(12)|min_length(2)'</span> <span class="token2">}</span> ``` ```