前言

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();
}
});

欢迎大家关注公众号,不定时干货,只做有价值的输出

作者:Dawnzhang 
出处:https://www.cnblogs.com/clwydjgs/p/9390488.html

easyui 进阶之表单校验、自定义校验的更多相关文章

  1. Angular使用总结 ---以密码确认为例实现模版驱动表单的自定义校验

    上一篇 总结了模版驱动表单的基本用法,示例中的校验使用的是原生HTML5的校验方式,本文补上自定义校验的部分. HTML5原生的表单校验属性(必填,长度限制,取值间隔,正则表达式等等)可以满足普通的校 ...

  2. JavaWeb -- Struts2,对比, 简单表单提交,校验,防重复提交, 文件上传

    Struts2核心流程图 1. Struts2 和 Struts1 对比 struts1:基于Servlet(ActionServlet),actionForm众多(类的爆炸),action单例(数据 ...

  3. easyui 表单和自定义验证扩展和js自定义返回值

    ================jsp==========================<form  method="post" id="regfrminp&qu ...

  4. 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)

    方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...

  5. 第二百二十一节,jQuery EasyUI,Form(表单)组件

    jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...

  6. js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

    js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...

  7. 01. xadmin表单的自定义排版

    xadmin表单的自定义布局(重写 get_form_layout()) apps.courses.adminx.py class NewCoursesAdmin(object): list_disp ...

  8. iview form表单数值类型校验「iview自定义form表单校验器」

    摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...

  9. day75 form 组件(对form表单进行输入值校验的一种方式)

    我们的组件是什么呢 select distinct(id,title,price) from book ORM: model.py class Book(): title=model.CharFiel ...

随机推荐

  1. Linux下Chrome/Chromium窗口边框有白线

    原因 窗口边框有白线是因为没有开启使用系统边框和标题栏 解决方法 勾选菜单-设置-外观-使用系统标题栏和边框 效果展示

  2. C# Winform多窗体&&构造函数传值

    一.多窗体:三种打开窗体的状态: 最最基础的弹窗: //写在按钮的点击事件内: //实例需要弹出的窗口的类: Form2 f2 = new Form2(); f2.Show(); 1.弹窗窗口: // ...

  3. poj1442 Black Box

    The Black Case 好啊! 首先,读题很艰难... 读完题,发现是求第k小的数,那么我们用splay水过对顶堆水过即可. #include <cstdio> #include & ...

  4. 【洛谷P1164 小A点菜】

    题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过uim由于买了一些辅(e ...

  5. MFC调用halcon生成的cpp内容

    打开VS,文件——新建——项目——Visual C++——MFC——MFC应用程序,注意下图,其他默认.窗体1个Button.1个Picture Control [VS配置Halcon] 1.若hal ...

  6. (sort 排序)P1583 魔法照片 洛谷

    题目描述 一共有n(n≤20000)个人(以1--n编号)向佳佳要照片,而佳佳只能把照片给其中的k个人.佳佳按照与他们的关系好坏的程度给每个人赋予了一个初始权值W[i].然后将初始权值从大到小进行排序 ...

  7. python 操作 saltstack Api(二) 示例

    获取token #!/usr/bin/env python #-*-coding:utf--*- import urllib import urllib.parse import urllib.req ...

  8. UEFI BIOS Rootkit Analysis

    catalog . BIOS简介 . UEFI BIOS . EFI编程简介 . UEFI Rootkit 1. BIOS简介 BIOS("Basic Input Output System ...

  9. NPOI使用教程附Helper

    1 NPOI简介 1.1 NPOI是什么 NPOI是POI的.NET版本,POI是一套用Java写成的库,我们在开发中经常用到导入导出表格.文档的情况,NPOI能够帮助我们在没有安装微软Office的 ...

  10. 5句话搞定ES5作用域

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...