mvc模式的javascript验证框架

做了几年的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"是错误输出位置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值