easyUI之表单校验

常用校验：

1.用户名必须填写

<s:textfield name="username" id="username" cssClass="easyui-validatebox" data-options="required:true" />

2.密码必须填写，且密码长度为3-12位

<s:password name="password" id="password" cssClass="easyui-validatebox" data-options="required:true,validType:'length[3,12]'" />

validType:validatebox中的一个属性，旗下有：

• email: 正则表达式匹配电子邮件规则。
• url: 正则表达式匹配的URL规则。
• length[0,100]: 在x和x字符允许。
• remote['http://.../action.do','paramName']: 发送ajax请求做验证值,返回“true”当成功。

效果

3.邮箱

<s:textfield name="email" id="email" cssClass="easyui-validatebox" data-options="required:true,validType:'email'" />

4.工资只能输入数字

<s:textfield name="salary" id="salary" cssClass="easyui-numberbox" data-options="required:true" />
<!-- numberbox数字框，限制只能输入数字，其他字符无效，可以说继承了validatebox，故可以使用alidatebox下的属性 -->

5.生日选择日期（只能选择，不可以手动输入，防止恶意输入）

<s:textfield name="birthday" id="birthday" cssClass="easyui-datebox" data-options="editable:false" />
<!-- datebox日期选择框，产生日历效果，依赖于combo下拉框，可以使用combo中的属性editable:boolean来设置是否允许编辑 -->

6.性别选择，对select使用combobox

<s:textfield name="sex" id="sex" cssClass="easyui-combobox" />

7.可在<script typd="text/javascript">中对validatebox进行扩展

$.extend($.fn.validatebox.defaults.rules, {
            phone: {
                // 验证手机号码
                validator: function (value) {
                    return /^(13|15|18)\d{9}$/i.test(value); //这里就是一个正则表达式
                },
                message: '手机号码格式不正确'           //这里是错误后的提示信息
            },
            pwdagain: {
                //两次密码是否一致
                validator: function (value, param) {
                    return value == $(param[0]).val(); 
                    //value是不用我们去填写的，但是param是需要我们提供的，使用方法为 pwdAgain[""]
                },
                message: '两次密码不一致'             //这里是错误后的提示信息
            }
        });

扩展后的使用

验证密码是否重复

<s:password name="passwordagain" id="passwordagain" cssClass="easyui-validatebox" data-options="required:true,validType:"passwordagain['#password']" />

输入手机号

<s:textfield name="phone" id="phone" cssClass="easyui-validatebox" 
                            data-options="required:true,validType:'phone'" />

表单提交：在提交表单时，先判断校验是否通过，通过在提交

	$(function(){
		$("body").css({visibility:"visible"});
		$('#save').click(function(){
			if($('#form').form('validate')){
				//校验通过
				$('#form').submit();
			}
		});
	});