自定义表单输入验证jquery,validatebox，增加自己的方法，验证完并保存写入数据库
不知为何，同一个form里，validate控件里，只有几个字段可以用，其他的用不了，这让我十分苦恼，只能想办法重写，但是又发现无法摆脱validate插件，
总不可能自己把那些很具体的校验条件摆出来，只能借助于validatebox，看能不能做一些调整改变
可是在function里写东西真让人头大
-------7.6
问题总算基本解决，实现了：只能输入指定位数的数字，只能输入中文，验证：手机号，身份证号，下拉菜单等功能
感谢：http://www.51xuediannao.com/js/jquery/jquery_validate/ 这篇文章重写了一些校验方法，十分有用！
<%@ include file="/common/CodeWIN.jsp"%>
<!--codewin位于webcontent/common/metro下 -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<!--该导入的包一定要导入！！-->
<% response.setHeader("Cache-Control", "no-cache"); %>
<% response.setHeader("Pragma", "no-cache"); %>
<% response.setDateHeader("Expires", 0); %>
<base target="_self" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>新增账户</title>
</head>
<style type="text/css">
input{
border:1px solid #ccc;
padding-left:2px;
margin-left: 5px;
}
span.error{color:#C00; padding:0 6px;}
</style>
<body>
<form name="sfm" id="sfm" method="post" target="">
<div class="easyui-panel" data-options="title:'新增账户信息'">
<table>
<tr>
<td colspan="4">
<a href="javascript:saveUmUser()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'">保存</a>
</td>
</tr>
</table>
</div>
<br>
<div class="easyui-panel" data-options="title:' '">
<table class="common" style="width:600px;" cellpadding="2" cellspacing="1">
<tr style="height: 30px;">
<td style="width:80px;text-align: right;">用户代码</td>
<td style="width:80px;text-align: left;">
<input type="text" name="UmUserVO.usercode" placeholder="必须为8位" required data-msg-required="请输入用户代码"
value="" maxlength="8" minlength="8"data-msg-maxlength="最多输入8个数字"data-msg-minlength="至少输入8个数字" /></td>
<!--
这个required data-rule-mobile 就是对应的规则，系统默认没有的，要自己加到下面的script中
-->
<td style="width:80px;text-align: right;">手机号码</td>
<td style="width:80px;text-align: left;">
<input type="text" name="UmUserVO.mobileno" placeholder="手机号"required data-rule-mobile="true" value=""data-msg-required="请输入手机号" data-msg-mobile="请输入正确手机号格式" style="width: 120px;"></td>
</tr>
<tr style="height: 30px;">
<td style="width:80px;text-align: right;">OpenID</td>
<td style="width:80px;text-align: left;">
<input type="text" name="UmUserVO.openid" maxlength="48" minlength="48" value="" placeholder="必须为48位" data-msg-maxlength="最多输入48个字符"data-msg-minlength="至少输入48个字符" ></td>
<td style="width:80px;text-align: right;">归属机构</td>
<td style="width:260px;text-align: left;" colspan="1">
<input class="easyui-validatebox" name="UmUserVO.comcode" id="UmUserVO_comcode"
data-options="" οndblclick="javascript:openUmComTree('UmUserVO_comcode','UmUserVO_comcname')"
value="" style="width:120px;background:#D4E7F5;">
<input class="easyui-validatebox" name="UmUserVO.comcname" id="UmUserVO_comcname"
style="width:120px;background:#D4E7F5;">
</td>
</tr>
<tr style="height: 30px;">
<td style="width:80px;text-align: right;">身份证号</td>
<td style="width:80px;text-align: left;"><input type="text" style="width:120px;"required data-rule-idCard="true" data-msg-required="请输入身份证号"name="UmUserVO.idcardno" value="" data-msg-idCard="请输入正确身份证格式" ></td>
<td style="width:80px;text-align: right;">员工类型</td>
<td style="width:80px;text-align: left;">
<div class="controls">
<select name= "UmUserVO.flag" required data-msg-required="请选择！">
<option value="">----选择菜单----</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
</tr>
<!-- <td style="width:160px;text-align: left;">
<select name="UmUserVO.flag" class="easyui-combobox" style="width: 100px;"
data-options="panelHeight:'auto',editable:false,required:true,
url:'${ctx}/service/bz/queryBzCodeList?busiTable=um_user&busiField=flag',
valueField:'codeCode',
textField:'codeCName'">
</select>
</td>
</tr>
-->
<tr style="height: 30px;">
<td style="width:80px;text-align: right;">是否有效</td>
<td style="width:80px;text-align: left;">
<div class="controls">
<select name= "UmUserVO.validstatus" required data-msg-required="请选择！">
<option value="">----选择菜单----</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<td style="width:80px;text-align: right;">用户名称</td>
<td style="width:160px;text-align: left;">
<input type="text" id="username" name="UmUserVO.username" placeholder="10个以内中文" required data-rule-chinese="true"data-msg-required="请输入中文用户名"data-msg-chinese="请输入正确中文用户名"></td>
</tr>
<!-- <td style="width:80px;text-align: right;">是否有效</td>
<td style="width:160px;text-align: left;">
<select name="UmUserVO.validstatus" class="easyui-combobox" style="width: 100px;"
data-options="panelHeight:'auto',editable:false,required:true,
url:'${ctx}/service/bz/queryBzCodeList?busiTable=um_user&busiField=validstatus',
valueField:'codeCode',
textField:'codeCName'">
</select>
</td> -->
</tr>
</table>
</div>
</form>
<script type="text/javascript">
//加入以下几个方法， 具体的规格见网上说明
jQuery.validator.addMethod("mobile", function (value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mobile.test(value));
}, "手机格式不对");
jQuery.validator.addMethod("chinese", function (value, element) {
var chinese = /^[\u4E00-\u9FFF]+$/;
return this.optional(element) || (chinese.test(value));
}, "格式不对,必须输入中文");
jQuery.validator.addMethod("idCard", function (value, element) {
var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//(15位)
var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//(18位)
return this.optional(element) || (isIDCard1.test(value)) || (isIDCard2.test(value));
}, "身份证格式不对");
//var data = $('#sfm').serialize();//序列化表单数据
//var uri = '${ctx}/service/um/saveUmUser?'+data;
//相当于覆盖了
function saveUmUser(){
var form = $("#sfm"); //把表单sfm定义成form
//alert(form.valid());
if(!(form.valid())) // valid()是validate的函数，无参数，会返回验证表单后的值，true或false
// 这个函数我去了官方网站看了全英文的才看懂！！ 终于明白大神们说的要多看英文的
{
alert('请检查后再提交！');// 这意味着表单内有数据不符合要求
return ; // 跳出saveumuser函数
}
alert('验证通过！');
var data = $('#sfm').serialize();//序列化表单数据
var uri = '${ctx}/service/um/saveUmUser?'+data;
//相当于覆盖了
showWinDIV(uri,800,700);
}
/**************************************************$("#sfm").attr("action",uri); $("#sfm").submit();
**************************************************//****$("#form1").validate();”是最重要的，如果需要验证必须使用该代码，否则无法实现验证。
如果指定的表单不同验证时只验证指定表单 $(function(){ $("#sfm").validate(); });***/
</script>
</body>
</html>
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
