validatebox页面表单字段输入校验案例(密码+手机号)

提供的校验规则:

1、非空校验required="required"

2、使用validType指定

       email: 正则表达式匹配电子邮件规则。 

       url: 正则表达式匹配的URL规则。 

       length[0,100]: 在x和x字符允许。 

       remote['http://.../action.do','paramName']: 发送ajax请求做验证值,返回“true”当成功。

使用前记住添加中文解析。

密码校验:length[4,6] 长度4-6, required="true" 必填,

<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
    <form id="editPasswordForm">
       <table cellpadding=3>
          <tr>
         <td>新密码:</td>
        <td><input  required="true" data-options="validType:'length[4,6]'" id="txtNewPass" type="Password" class="txt01 easyui-validatebox" /></td>
         </tr>
         <tr>
         <td>确认密码:</td>
            <td><input required="true" data-options="validType:'length[4,6]'" id="txtRePass" type="Password" class="txt01 easyui-validatebox" /></td>
         </tr>
        </table>
    </form>
</div>
<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
   <a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" >确定</a>
   <a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a>
</div>

提交密码校验:上面只是提示,并不能阻止页面提交发送ajax请求。

//为确定按钮绑定事件
$("#btnEp").click(function(){
//进行表单校验
var v = $("#editPasswordForm").form("validate");
if(v){
//表单校验通过,手动校验两次输入是否一致
var v1 = $("#txtNewPass").val();
var v2 = $("#txtRePass").val();
if(v1 == v2){
//两次输入一致,发送ajax请求
$.post("userAction_editPassword.action",{"password":v1},function(data){
if(data == '1'){
//修改成功,关闭修改密码窗口
$("#editPwdWindow").window("close");
}else{
//修改密码失败,弹出提示
$.messager.alert("提示信息","密码修改失败!","error");
}
});
}else{
//两次输入不一致,弹出错误提示
$.messager.alert("提示信息","两次密码输入不一致!","warning");
}
}
});

自定义校验规则:

举例校验手机号码

<script type="text/javascript">
$(function(){
var reg = /^1[3|4|5|7|8][0-9]{9}$/;
//扩展手机号校验规则
$.extend($.fn.validatebox.defaults.rules, {
telephone: {
validator: function(value,param){
return reg.test(value);
},
message: '手机号输入有误!'
}
});
});
</script>

手机号输入框应用规则


为保存按钮绑定事件,提交表单

//为保存按钮绑定事件
$("#save").click(function(){
//表单校验,如果通过,提交表单
var v = $("#addStaffForm").form("validate");
if(v){
$("#addStaffForm").submit();
}
});

猜你喜欢

转载自www.cnblogs.com/Darkqueen/p/9509992.html