表单及表单验证
表单是系统页面的一大部分，我们采用socss的栅格方式布局、表单元素和
easyui自带的验证框架，只要遵循规则就可以定制出规范的表单
表单验证事项
表单添加class名
soform用来对应表单样式书写；表单添加class名
form-validate开启表单验证；表单添加class名
form-enter开启回车切换输入框；表单提交按钮添加class
btn-easyFormSubmit，表单为异步提交，提交地址为form的action地址表单验证采用的是
easyui的form验证框架，遵循easyui的验证使用方法： http://www.jeasyui.net/demo/527.html表单普通输入框 input 或者
textarea可以更便捷的方式来写验证方法：1/ 添加class
txt-validate2/ 非空验证通过添加
noNull属性实现：默认非空提示信息：noNull=true，自定义提示：noNull="此信息必填"3/ 遵循
easyui写法，自定义验证写在input 的自定义属性validType中4/ 多重验证规则写法通过
many[]来实现，[]中为验证规则数组，例如：validType=many['username["请输入正确的用户名"]','maxlength[4,"用户名不能超过4个字符"]']表单提交可自定义提交前和提交后事件，函数名写在
form的data-opt属性里，参考如：<form class="hk_form" method="post" data-opt="**{beforeCallback:'beforeSubmit',callback:'afterSubmit'}**" action="json/true.js">，则表单提交时验证通过向服务器提交之前会向全局里去找
window.beforeSubmit函数，并执行；同理，表单提交后返回表单状态时执行
window.afterSubmit事件
代码示例：
<form class="soform form-validate form-enter pad-t15" role="form" method="post" action="json/true.js">
<div class="row">
<div class="p6"><div class="item-one">
<label class="lab-item">用户名：</label>
<input class="txt txt-validate" type="text" name="userName" placeholder="用户名" noNull="请输入用户名" validType=many['username["请输入正确的用户名"]','maxlength[4,"用户名不能超过4个字符"]'] />
</div></div>
<div class="p6"><div class="item-one">
<label class="lab-item">姓名：</label>
<input id="nameChinese" class="txt txt-validate" type="text" name="name" noNull="请输入姓名" />
</div></div>
</div>
<div class="row">
<div class="p6"><div class="item-one">
<label class="lab-item">拼音码：</label>
<input id="namePinyin" class="txt txt-validate" type="text" name="namePinyin" placeholder="姓名拼音码" noNull="请输入姓名拼音码" />
</div></div>
<div class="p6"><div class="item-one">
<label class="lab-item">证件类型：</label>
<select id="cardType" class="so-select txt-validate" name="cardType" noNull="请选择证件类型" data-opt="{url:'json/cardtype.js',data:{type:1},value:1,success:function(val,_self,opt){console.log(val,opt);},change:function(val,_self,opt){console.log(val);}}">
</select>
</div></div>
</div>
<div class="row">
<div class="p6"><div class="item-one">
<label class="lab-item">证件号码：</label>
<input id="cardNo" class="txt txt-validate" type="text" name="cardNo" placeholder="请输入证件号码" noNull="请输入证件号码" />
</div></div>
<div class="p3"><div class="item-one">
<label class="lab-item">性别：</label>
<select id="sex" class="drop txt-validate" name="sex" noNull="请选择性别">
<option selected="selected">请选择...</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div></div>
<div class="p3"><div class="item-one solab-sb">
<label class="lab-item">年龄：</label>
<input id="age" class="txt txt-validate" type="text" name="age" placeholder="年龄" noNull="请输入年龄" validType="age['请输入正确的年龄']" />
</div></div>
</div>
<div class="row">
<div class="p6"><div class="item-one item-group">
<label class="lab-item">头像：</label>
<input class="txt txt-validate wp-75" type="text" name="userPhoto" /><input type="button" class="btn btn-warning btn-small wp-25" name="btnCancel" value="上传" />
</div></div>
<div class="p6"><div class="item-one">
<label class="lab-item">生日：</label>
<input id="birthday" class="txt txt-validate so-date" type="text" name="birthday" placeholder="生日" noNull="请填写生日" />
</div></div>
</div>
<div class="row">
<div class="p6"><div class="item-one">
<label class="lab-item">密码：</label>
<input class="txt txt-validate" id="password" type="password" name="password" placeholder="默认密码123456" noNull="请输入密码" />
</div></div>
<div class="p6"><div class="item-one">
<label class="lab-item">确认密码：</label>
<input class="txt txt-validate" type="password" name="repassword" placeholder="再输入一次密码" validType="equals['#password','两次密码不一致']" noNull="请确认密码" />
</div></div>
</div>
<div class="row">
<div class="p6"><div class="item-one">
<label class="lab-item">电话号码：</label>
<input class="txt txt-validate" type="text" name="mobile" placeholder="电话号码" />
</div></div>
<div class="p6"><div class="item-one">
<label class="lab-item">关联网站：</label>
<input class="txt easyui-combobox required" style="width:100%;" id="userSites" type="text" name="userSites" placeholder="请选择关联组织" data-options="valueField: 'id',textField: 'text',url: 'json/combo.js',method:'get',multiple:true,required:true" missingMessage="请选择关联网站(多选)" />
</div></div>
</div>
<div class="row">
<div class="p6"><div class="item-one">
<label class="lab-item">Email：</label>
<input class="txt txt-validate" type="text" name="email" placeholder="请输入email地址" validType="many['email','maxlength[0,30]']" />
</div></div>
<div class="p6"><div class="item-one">
<label class="lab-item">关联组织：</label>
<input class="txt easyui-combotree required" style="width:100%;" data-options="url:'json/groupTree.js',method:'get',flatData:true,method:'get',multiple:true,onlyLeafCheck:true,required:true,prompt:'请选择关联组织'" type="text" name="group" placeholder="请选择关联组织" missingMessage="请选择关联组织(多选)" />
</div></div>
</div>
<div class="row">
<div class="p6"><div class="item-one">
<label class="lab-item">微信：</label>
<input class="txt txt-validate" type="text" name="weChat" placeholder="" />
</div></div>
<div class="p6"><div class="item-one">
<label class="lab-item">所属医院：</label>
<!-- {"id":"1","hosName":"湘潭爱尔眼科医院","province":"湖南","level":"二级","phone":"18647852114","fax":"0732-21548547","state":1,"preparer":"张依依","address":"湘潭市海天中路32号"} -->
<input class="txt easyui-combogrid required" style="width:100%;" data-options="
url:'json/preparing.js',
panelWidth:550,
value:'23',
idField:'id',
textField:'hosName',
method:'get',
multiple:true,
required:true,
prompt:'请选择所属部门',
columns:[[
{field:'hosName',title:'医院名称',width:160},
{field:'province',title:'省份',width:60},
{field:'preparer',title:'联系人',width:60},
{field:'phone',title:'联系电话',width:100},
{field:'address',title:'联系地址',width:160}
]] " type="text" name="group" placeholder="请选择所属医院" missingMessage="请选择所属医院" />
</div></div>
</div>
<div class="row">
<div class="p6"><div class="item-one">
<label class="lab-item">QQ：</label>
<input class="txt txt-validate" type="text" name="QQ" placeholder="QQ号码" />
</div></div>
<div class="p6"><div class="item-one">
<label class="lab-item">账号状态：</label>
<label class="lab-val"><input class="rad {required:true}" type="radio" value="1" name="state" />启用</label>
<label class="lab-val"><input class="rad" type="radio" value="2" name="state" />停用</label>
</div></div>
</div>
<p class="row-btn center">
<input type="button" class="btn btn-primary btn-easyFormSubmit" lay-submit name="btnSubmit" value="保存" />
<input type="button" class="btn btn-primary disabled" lay-submit name="btnSubmit" value="立即保存" />
<input type="button" class="btn btn-cancel" name="btnCancel" value="取 消" />
</p>
</form>
运行效果
自定义验证
complexValid以正则自定义验证fnValid以函数自定义验证
代码示例：
...
{title:'分子',field:'numerator',width:120,editor : { type: "numberbox",options:{validType:'fnValid["compareFraction"]' ,required:true,missingMessage:'请填写数量', }}}
...
window.compareFraction = function (v) {
var res = {};
var vals = $e.getCellVals(["numerator","denominator"]);
function isInteger(s){//是否为正整数
var re = /^[0-9]+$/ ;
return re.test(s)
}
var v = true;
for (var a in vals ) {
if(!isInteger(vals[a])) return v =false;
}
if(v && vals["denominator"] - vals["numerator"] >= 0 ) {
res.result = true;
} else {
res.msg = "分子不得小于分母的正整数";
res.result = false;
}
return res;
}
附录：$.rules现所有验证方法
console.log($.rules);
$.rules = {
age: {message: '请输入正确的年龄', validator: ƒ}
chsEngNum: {message: '只允许汉字、英文字母或数字。', validator: ƒ}
chsEngNumB: {message: '只能为汉字、字母或数字且不能为纯数字。', validator: ƒ}
cn: {message: '请输入中文', validator: ƒ}
code: {message: '只允许汉字、英文字母、数字及下划线.', validator: ƒ}
commonDate: {message: '日期格式如：1980-01-01 12:12:01', validator: ƒ}
complexPass: {message: '须含大小写字母、数字及特殊字符', validator: ƒ}
complexValid: {message: '', validator: ƒ}
containsSpecialChar: {message: '含有中英文特殊字符', validator: ƒ}
date: {message: '日期格式如：1980-01-01', validator: ƒ}
dateTime: {message: '日期格式如：1980-01-01 12:12:01', validator: ƒ}
dateTimeSecond: {message: '日期格式如：1980-01-01 12:12:01', validator: ƒ}
digits: {message: '只能输入0-9数字', validator: ƒ}
diymonth: {message: '月数为正整数或一位小数', validator: ƒ}
email: {message: '请输入有效的电子邮箱', validator: ƒ}
en: {message: '只能包含英文字符', validator: ƒ}
engNum: {message: '请输入英文字母或数字', validator: ƒ}
equals: {message: '输入的内容不匹配.', validator: ƒ}
float: {message: '请输入正确的小数', validator: ƒ}
floatFix: {message: '请填写正确的正数', validator: ƒ}
floatLtZero: {message: '浮点数必须小于0', validator: ƒ}
floatLteZero: {message: '浮点数必须小于或等于0', validator: ƒ}
floatNEqZero: {message: '浮点数不可以等于0', validator: ƒ}
fnValid: {message: '值不正确', validator: ƒ}
forceValidFail: {message: '{0}', validator: ƒ}
idCardNo: {message: '请填写正确的身份证号码', validator: ƒ}
int: {message: '请输入一个整数', validator: ƒ}
ip: {message: '请输入合法的IP', validator: ƒ}
isFloatGteZero: {message: '浮点数必须大于或等于0', validator: ƒ}
jInt: {message: '请输入一个整数', validator: ƒ}
length: {message: '内容长度介于{0}和{1}之间', validator: ƒ}
mInt: {message: '请输入一个小于等于0的整数', validator: ƒ}
mNumber: {message: '请输入一个小于等于0的数字', validator: ƒ}
many: {message: '', validator: ƒ}
max: {message: '数字最大为{0}', validator: ƒ}
maxDate: {message: '日期不能大于{0}', validator: ƒ}
maxlength: {message: '最大长度{0}', validator: ƒ}
min: {message: '数字最小为{0}', validator: ƒ}
minDate: {message: '日期不能小于{0}', validator: ƒ}
minlength: {message: '最小长度{0}', validator: ƒ}
mobile: {message: '请填写正确的手机号码', validator: ƒ}
nInt: {message: '请输入一个负整数', validator: ƒ}
nNumber: {message: '请输入一个负数', validator: ƒ}
normalDate: {message: '日期格式如：1980-01-01', validator: ƒ}
normalPass: {message: '须含字母及数字', validator: ƒ}
numEquals: {message: '输入的内容不匹配.', validator: ƒ}
number: {message: '请输入正确的数字', validator: ƒ}
pFloatFix: {message: '请填写正确的正数', validator: ƒ}
pInt: {message: '请输入一个正整数', validator: ƒ}
pNumber: {message: '请输入一个正数', validator: ƒ}
phone: {message: '请填写正确的电话号码', validator: ƒ}
phoneArea: {message: '请填写正确的区号', validator: ƒ}
phoneB: {message: '电话号码为7-20位的数字', validator: ƒ}
phoneNumber: {message: '请填写正确的电话号码', validator: ƒ}
precision: {message: '最大{0}位小数', validator: ƒ}
qq: {message: '请填写正确的QQ号码', validator: ƒ}
range: {message: '数字只能在{0}与{1}之间', validator: ƒ}
rangeNum: {message: '只能为{0}与{1}之间小于{2}位小数位的数字', validator: ƒ}
rangelength: {message: '最小长度{0}，最大长度{1}', validator: ƒ}
remote: {message: '该名称已存在', validator: ƒ}
required3: {message: '{0}', validator: ƒ}
sInt: {message: '请输入一个大于0的正整数', validator: ƒ}
sNumber: {message: '请输入一个大于0的正数', validator: ƒ}
tel: {message: '请填写正确的联系方式', validator: ƒ}
unZeroInt: {message: '请输入一个非零的整数', validator: ƒ}
url: {message: '请输入有效的URL地址', validator: ƒ}
username: {message: '请输入字母、数字或下划线', validator: ƒ}
zipCode: {message: '请填写正确的邮政编码', validator: ƒ}
zipCodeB: {message: '请填写正确的邮政编码', validator: ƒ}
};