easyUI表单校验和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表单提交
因为一旦使用了表单前端校验之后,就必须使用表单同步提交