JQueryEasyUI表单校验和jquery表单提交
1. 表单校验
首先看下效果图
在这里我需要在这个form表单提交的点击下一步之前，对这些文本框属性进行非空或者正则校验！话不多说，直接看源码
<form class="my-form" method="post" id="form-person">
<table class="my-table" style="text-align: right;">
<tr>
<td>
<strong>姓名：</strong>
</td>
<td style="text-align: left">
<input name="name" id="name" type="text" style="width: 200px;" class="easyui-validatebox" data-options="required:true" />
</td>
<td>
<strong>性别：</strong>
</td>
<td style="text-align: left">
<input required="true"
name="sex"
id="sex"
class="spe-tag"
data-spe='{"type":"codeselect","codetype":"common.sex","allText":"<%=data.sexDesc%>"}'/></td>
</tr>
<tr>
<td>
<strong>身份证号：</strong>
</td>
<td style="text-align: left" id="idnoTd">
<input type="text" id="idno" required name="idno" maxlength="18" placeholder="限15/18位" style="width: 200px;" class="easyui-validatebox" data-options="required:true,validType:'idcard'" />
</td>
<td>
<strong>出生日期：</strong>
</td>
<td style="text-align: left">
<input class="easyui-datebox" id ="birthdate" name="birthdate" style="width:160px;" required="true"/>
</td>
</tr>
<tr>
<td>
<strong>联系电话：</strong>
</td>
<td style="text-align: left">
<input required="required" id="linkphone" name="linkphone" type="text" style="width: 200px;" class="easyui-validatebox" required="true">
</td>
<td>
<strong>婚姻状况：</strong>
</td>
<td style="text-align: left">
<input name="maritalstate"
id="maritalstate"
class="spe-tag"
data-spe='{"type":"codeselect","codetype":"common.maritalstatus"}'/>
</td>
</tr>
<tr>
<td>
<strong>工作单位：</strong>
</td>
<td style="text-align: left">
<input name="workunit" id="workunit" type="text" style="width: 200px;">
</td>
<td>
<strong>职业：</strong>
</td>
<td style="text-align: left;">
<input style="width: 315px"
name="job"
id="job"
class="spe-tag"
data-spe='{"type":"codeselect","codetype":"common.job"}'/>
</td>
</tr>
<tr>
<td>
<strong>文化程度：</strong>
</td>
<td style="text-align: left">
<input style="width: 200px;"
name="education"
id="education"
class="spe-tag"
data-spe='{"type":"codeselect","codetype":"common.education"}'/>
</td>
<td>
<strong>民族：</strong>
</td>
<td style="text-align: left">
<input name="nation"
id="nation"
class="spe-tag"
data-spe='{"type":"codeselect","codetype":"common.nation"}'/>
</td>
</tr>
<tr>
<td>
<strong>户籍地址：</strong>
</td>
<td style="text-align: left">
<input name="permaddress" id="permaddress" type="text" style="width: 300px;">
</td>
</tr>
<tr>
<td>
<strong>现住地址：</strong>
</td>
<td style="text-align: left">
<input name="curaddress" id="curaddress" type="text" style="width: 300px;">
</td>
</tr>
<tr>
<td>
<strong>签约协议：</strong>
</td>
<td style="text-align: left">
<div id="signedAgreement">
<input type="checkbox" id="cr" style="-webkit-box-shadow: 0 0 0 #fff;-moz-box-shadow: 0 0 0 #fff;">
<span style="text-decoration:underline;cursor: pointer">我已阅读并同意签约家庭医生协议</span>
</div>
</td>
</tr>
</table>
<div id="filing-nextStep" class="btn btn-main" style="margin-left: 40%;margin-top: 3%;">
<i class="fa fa-share"></i> 下一步
</div>
</form>
其中这里的伤
这里class属性和data-options就是校验表单不能为空
注意:class属性对input赋值是必填的
下面就是正则校验那些邮箱身份证号或者手机号
这里可以看到有一个validType:'idcard’的赋值操作，这里就是直接运用到了自己自定义的正则校验，其中idcard就是自定义的身份证校验的类型值，下面附上常用的重写easyui正则校验源码
// 自定义easyui的验证
$.extend($.fn.validatebox.defaults.rules, { // 重写easyui默认属性
minLength : {// 最小长度
validator : function(value, param) {
return value.length >= param[0];
},
message : '输入内容长度必须大于 {0}'
},
maxLength : {// 最大长度
validator : function(value, param) {
return value.length <= param[0];
},
message : '输入内容长度必须小于 {0}'
},
digits: {// 整数
validator : function(value) {
return !isNaN(value) && value%1 === 0;
},
message : '输入内容必须为整数'
},
number: {// 数字
validator : function(value) {
return !isNaN(value);
},
message : '输入内容必须为数字'
},
price: {// 金额
validator : function(value) {
return /(^[1-9]\d*(\.\d{1,2})?$)|(^[0]{1}(\.\d{1,2})?$)/.test(value);
},
message : '金额不能小于零且最多包含两位小数'
},
idcard: {// 身份证号
validator : function(value) {
return /^(\d{14}|\d{17})(\d|[xX])$/.test(value);
},
message : '身份证号格式错误'
},
multipleTo: {// 倍数
validator: function (value, param) {
return value % $(param[0]).val()<=1;
},
message: '被合并数量必须是合并数量的倍数'
},
phone: {//手机号码
validator: function (value, param) {
return /^(?:13\d|15\d|18\d)-?\d{5}(\d{3}|\*{3})$/.test(value);
},
message: '手机号码输入不正确！'
},
compareTo: {// 比较
validator: function (value, param) {
return value<=$(param[0]).val();
},
message: '合并数量不能大于库存数量'
},
equalTo: {// 是否相等
validator: function (value, param) {
return $(param[0]).val() == value;
}, message: '内容不一致'
},
compartTime:{//比较日期前后
validator: function (value, param) {
return $(param[0]).datetimebox('getValue')<value;
},
message: '结束日期必须大于起始日期'
},
todayLte:{// 小于等于今天
validator: function (value, param) {
return value ? !(value > core.transTimeStamp(new Date().getTime(), 0)) : true;
},
message: '日期不能大于今天'
},
todayGte:{// 大于等于今天
validator: function (value, param) {
return value ? !(value < core.transTimeStamp(new Date().getTime(), 0)) : true;
},
message: '日期不能小于今天'
}
});
easyUI官方链接验证框地址：http://www.jeasyui.net/plugins/167.html
以上就是实现easyUI前端表单校验功能
2. Jquery表单提交
一旦使用了表单前端校验之后，就必须使用表单同步提交，不能进行ajax异步请求，不然的话这些校验就会失效，所以这里我们使用form表单做同步提交
$formPerson.form('submit', {
url: 'doctor/filingContract/patientFilingUpdate',
onSubmit: function(){
return $(this).form('validate');
},
success:function(data){
var ret = JSON.parse(data);
core.showMessage(ret.msg);
$("#assess").click();
}
});
在这里使用在点击‘下一步’的时候form表单做同步提交，实现最终完整的功能
扫一扫
603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
