做了几年的java开发,觉得框架自带的前端页面验证都不是能够很好的满足实际开发的需要,因此自己花了几天的时间自己写了一个js验证框架,开发人员可以自己定义页面元素要监控的事件,验证结果显示在页面制定的位置,并且在页面提交时也能一起验证所有的被验证元素
1 js部分formValidate.js
1)定义验证对象的model:checkTargetElement
2)定义验证对象的控制control:checkAllElements和addCheckElementsListener
2 页面部分添加验证器
1)事件监听验证
//其中的三个参数是要验证元素的id,触发显示验证的说明文字的事件,触发验证的方法的事件。
var checkTargetElementFirst = new checkTargetElement("phone","onclick","onblur");
//定义验证方法 validate86Phone这个验证方法用户自己定义
checkTargetElementFirst.attach("validate86Phone(document.getElementById('phone'))");
//添加要验证元素属于的form
checkFormObjFirst = new checkFormObj('viewTestPhoneForm');
//把验证对象放入到验证容器中
checkFormObjFirst.attach(checkTargetElementFirst);
//添加验证监听
checkFormObjFirst.addCheckElementsListener();
2)页面提交验证
//调用提交验证方法
checkFormObjFirst.checkAllElements();
if(canSubmit){
//form.submit();
}
3页面元素部分定义view
<td>
*手机号码
</td>
<td>
<INPUT type="hidden" id="phone_message" value="手机号码必须是以86开头的并且长度不小于三位的数字" />
<s:textfield id="phone"
name="svcTestPhone.mdn"
value="86" size="40" theme="simple" maxlength="20"
cssClass="inputs" />
</td>
<td class="" id="phone_message_info"></td>
</tr>
说明:id="phone_message"为显示验证说明文字,id="phone"是验证元素,id="phone_message_info"是错误输出位置