1、Validform
核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,可以随便添加或者去掉任一表单元素而不必修改验证代码。
具体功能:
1) 可以在input上自定义datatype属性,也可以直接使用正则表达式;
2) 可以自定义提示方式;
3) 可以实现实时验证以及表单的ajax提交,可以灵活的设置ajax提交时的参数;
4) 可以在表单开始检测前和表单检测通过后,提交表单之前绑定事件;
2、引入Validform的js和css
<script type="text/javascript" src="<%=path %>/js/form/Validform_v5.3.2_ncr_min.js" ></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/form/style.css" />
3、为需要验证的元素设置验证类型和验证信息
1 <td class="right">姓 名 : </td>
2 <td class="left">
3 <input name="name"
4 datatype="zh2-8" sucmsg="姓名验证通过!" nullmsg="请输入姓名!" errormsg="请输入2至8字中文姓名!" />
5 </td>
6 <td class="right">薪 水 : </td>
7 <td class="left">
8 <input name="salary"
9 onkeyup="this.value=(this.value.match(/[1-9]\d*(\.\d{0,2})?/)||[''])[0]"
10 onblur="this.value=this.value.replace(/\.$/,'')"
11 datatype="/[1-9]\d*(\.\d{0,2})?/g" sucmsg="薪水验证通过!" nullmsg="请输入薪水!" errormsg="请输入薪水!" />
12 </td>
13 <td class="right">手 机 : </td>
14 <td class="left">
15 <input name="phone"
16 datatype="m" sucmsg="手机号码验证通过!" nullmsg="请输入手机号码!" errormsg="请输入手机号码!" />
17 </td>
18 <td class="right">邮 箱 : </td>
19 <td class="left">
20 <input name="email"
21 datatype="e" sucmsg="邮箱验证通过!" nullmsg="请输入邮箱!" errormsg="请输入邮箱!" />
22 </td>
23 <td class="right">部 门 : </td>
24 <td class="left">
25 <select name="departmentId"
26 datatype="/[1-9]\d*/g" sucmsg="部门验证通过!" nullmsg="请选择所属部门!" errormsg="请选择所属部门!">
27 <option value="0">-- 请选择 --</option>
28 <%for(Department dept : depts) {%>
29 <option value="<%=dept.getId() %>"><%=dept.getName() %></option>
30 <%}%>
31 </select>
32 </td>
33 <td class="right">自我介绍 : </td>
34 <td class="left">
35 <textarea rows="5" cols="50" name="description"
36 datatype="*" sucmsg="自我介绍验证通过!" nullmsg="请输入自我介绍!" errormsg="请输入自我介绍!"></textarea>
37 </td>
其中,以下几个属性validform
需要使用:
1) datatype: 传入自定义datatype类型,可以是正则,也可以是函数。
2) sucmsg: 当表单元素通过验证时的提示信息,不绑定,默认提示"通过信息验证!"。
3) nullmsg: 当表单元素值为空时的提示信息,不绑定,默认提示"请填入信息!"。
4) errormsg: 输入内容不能通过验证时的提示信息,默认提示"请输入正确信息!"。
4、初始化验证插件
1 <script type="text/javascript">
2 $(function() {
3 // 表单验证
4 $("#emp_add_form").Validform({
5 tiptype: 3,
6 showAllError: true,
7 datatype: {
8 "zh1-6": /^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/
9 }
10 });
11 });
12 </script>
tiptype
可用的值有1、2、3、4和function函数,默认tiptype为1。
1) 1 => 自定义弹出框提示;
2) 2 => 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
3) 3 => 侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
4) 4 => 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象,表单以ajax提交时不显示表单的提交状态);
showAllError
可用值: true | false
默认为false。为true时提交表单所有错误提示信息都会显示;为false时碰到验证不通过的对象会停止检测后面的元素,只显示该元素的错误信息。
5、效果