建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS原生表单验证插件validForm.js

来源:易助科技网浏览量:12收藏

简介

validForm.js是一款JS原生表单验证插件。


使用

1.  引入文件


<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="../src/validForm.js"></script>


2.  HTML


<form id="mainForm">
 方式
 <select name="method" id="test">
   <option value="">请填写</option>
   <option value="1">a</option>
   <option value="2">b</option>
   <option value="3">c</option>
 </select>
 <br>
 姓名
 <input type="text" name="name" />
 <br>
 密码
 <input type="password" name="pwd" />
 <br>
 邮箱
 <input type="text" name="email" />
 <br>
 <button id="submit">提交</button>
 <br>
</form>


3.  调用


$(function (){
  $('#submit').on('click', function(){
  /* * data(校验数据集合): { 校验单元名称: [ 校验元素(css选择器语法),校验规则(正则表达式或内置校验规则),校验提示语(空校验正确提示,其它校验失败提示)] }
   * model(校验模型): { el: 校验表单(css选择器语法),data:[data[method], data[name]](自定义校验数据集合)}
   * 内置校验规则:
   * 1.empty    空(空的校验规则也可以为null,undefined,'')
   * 2.isNumber 数字格式 
   * 3.isEmail  email格式 
   * 4.isUrl    url格式
   * 5.isMobile 手机号格式 
   * 6.isID     身份证号格式
   * 7.isDate   日期格式(2014-07-05 2014-7-5 或2014/07/05 2014/7/5)
   * */
   var data = {
     method:['select[name="method"]', null, '请选择方式'],
     name:  ['input[name="name"]', , '姓名必填'],
     pwd:   ['input[name="pwd"]', '', '密码必填'],
     email: ['input[name="email"]', 'empty', '邮箱必填']
   };
   var model = {
     el: '#mainForm', data: data
   };
   /* * 等价写法:
      * var model = {el: '#mainForm', data: [data.method, data.name, data.pwd, data.email]};
      * */
   validForm(model, function(msg){
     alert(msg);
   }
  });
});



相关链接

GitHub 地址 :https://github.com/reamd/validForm