前言
easyui 是一种基于 jQuery 的用户界面插件集合, 它为创建现代化, 互动, JavaScript 应用程序, 提供必要的功能, 完美支持 html5 网页的完整框架, 节省网页开发的时间和规模. 非常的简单易学.
easyui 中文网: http://www.jeasyui.net/
easyui 官网: http://www.jeasyui.com/documentation/#
今天我们来学习表单校验以及如何自定义表单校验
正文
一, 从标记创建验证框(validatebox).
1. 邮箱校验
a. 标记方式创建验证框:
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">
b. 使用 JavaScript 创建验证框(validatebox).
- <input id="vv">
- $('#vv').validatebox({ required: true, validType: 'email' });
2. 设置必输以及长度限制:
<input class="easyui-numberbox" type="text" name="dispid" style="width: 625px" data-options="required:true,validType:'length[6,16]'" />
3, 设置只能输入数字
<input class="easyui-numberbox" type="text" name="pid" style="width: 625px" data-options="required:true" />
4, 设置日期并屏蔽手动输入
<input class="easyui-datebox" id ="dispid" type="text" name="dispid" style="width: 625px" data-options="editable:false" />
二, 自定义表单校验方法
1, 静态传参 -- 检查两次密码是否相同.
检查密码和重新输入密码是相同的.
- // extend the 'equals' rule
- $.extend($.fn.validatebox.defaults.rules, {
- equals: {
- validator: function(value,param){
- return value == $(param[0]).val();
- },
- message: 'Field do not match.'
- }
- });
- <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
- <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validType="equals['#pwd']">
2. 动态传参 -- 传入校验的长度的数字参数
- $.extend($.fn.validatebox.defaults.rules, {
- nameLength: {
- validator: function(value, param){
- // 正则表达式需要动态传递参数, 必须采用正则对象即构造器方式, 传入拼接了动态参数的字符串的方式
- var re =new RegExp("^[\u4e00-\u9fa5]|[a-zA-Z0-9]{" + param[0]+ "," + param[1] + "}$");
- return re.test(value);
- },
- // 提示信息中也需要动态添加参数, 此时获取 param 中的参数方式为{0},{1}, 分别代表 param[0],param[1]
- message: "菜单名称长度要求为 {0}-{1} 位!"
- },
- pageValidata: {
- validator: function(value, param){
- // 正则表达式需要动态传递参数, 必须采用正则对象即构造器方式, 传入拼接了动态参数的字符串的方式
- var m_reg = new RegExp("^[a-zA-Z0-9]{" + param[0]+ "," + param[1] + "}$");
- if (!m_reg.test(value)) {
- $.fn.validatebox.defaults.rules.pageValidata.message = "只能为 {0}-{1} 位英文或数字!";// 动态设置 message 提示信息, complexValid 与方法名对应
- return false;
- }else {
- return true;
- }
- },
- // 提示信息中也需要动态添加参数, 此时获取 param 中的参数方式为{0},{1}, 分别代表 param[0],param[1]
- message: ""
- },
- })
页面调用
- <input class="easyui-textbox" id="iconCls" type="text" name="iconCls"
- style="width: 625px" data-options="validType:'pageValidata[2,16]',required:true"
- />
- <input class="easyui-textbox" id="name" type="text" name="name" style="width: 625px"
- data-options="validType:'nameLength[2,30]',required:true" />
3. 动态传参 -- 传入正则表达式, 提示信息, 参数等
- (例子来自 javaloveiphone)
- $.extend($.fn.validatebox.defaults.rules, {
- // 五个参数: 第一个是正则表达式, 第二个是错误提示信息, 前两个参数用户合法性验证; 第三个是调用的 url, 第四个是传递给服务器的参数名(参数 key), 第五个是错误提示信息, 第六个参数是当前表单 id 字段
- complexValid : {
- validator: function(value, param) {
- var m_reg = new RegExp(param[0]);
- if (!m_reg.test(value)) {
- $.fn.validatebox.defaults.rules.complexValid.message = param[1];// 动态设置 message 提示信息, complexValid 与方法名对应
- return false;
- }
- else {
- var postdata = {};
- postdata[param[3]] = value; // 动态的 key 和 value 对应
- postdata['id'] = $("#"+param[5]).val();// 获取 id 值
- var result = $.Ajax({
- url: param[2], // 动态 URL
- data: postdata,
- async:false,
- type: "post"
- }).responseText;
- if (result == "false") {
- $.fn.validatebox.defaults.rules.complexValid.message = param[4]; // 动态设置 message 提示信息, complexValid 与方法名对应
- return false;
- }
- else {
- return true;
- }
- }
- },
- message : ""
- }
- })
页面调用
<input class="easyui-textbox" type="text" name="userCode" validType="complexValid['^[0-9a-zA-Z]+$','只能包含字母, 数字','userCode','已被占用, 换一个试试!','userId']"></input>
三, 正则表达式
自定义的表单校验再加上正则表达式大全基本上可以覆盖所有的校验规则
正则表达式大全: https://www.cnblogs.com/clwydjgs/p/9366883.html
四, 表单提交
在提交表单前记得要校验通过才能提交哦
- $('#save').click(function(){
- if($('#form').form('validate')){
- // 校验通过
- $('#form').submit();
- }
- });
来源: https://www.cnblogs.com/clwydjgs/p/10002315.html