前言

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. js 判断所选时间(或者当前时间)是否在某一时间段的实现代码

    var time_range = function (beginTime, endTime, nowTime) { var strb = beginTime.split (":") ...

  2. CF Educational Codeforces Round 57划水记

    因为是unrated于是就叫划水记了,而且本场也就用了1h左右. A.B:划水去了,没做 C:大水题,根据初三课本中圆的知识,可以把角度化成弧长,而这是正多边形,所以又可以化成边数,于是假设读入为a, ...

  3. 模块---hashlib、configparse、logging

    一.hashlib模块 hashlib模块介绍:hashlib这个模块提供了摘要算法,例如 MD5.hsa1 摘要算法又称为哈希算法,它是通过一个函数,把任意长度的数据转换为一个长度固定的数据串,这个 ...

  4. R语言绘图(FZ)

    P-Value Central Lmit Theorem(CLT) mean(null>diff) hist(null) qqnorm(null) qqline(null) pops<-r ...

  5. C++基础知识--DAY2

    昨天我们主要是讲的C++相对于C语言的变化,结尾讲述了一点引用的基础知识,要明白,引用就是对一个变量取别名,在C++中需要用指针的都可以思考是否可以用引用来代替. 1. 常引用 常引用(const s ...

  6. getchar(),scanf(),gets(),cin,输入字符串

    #include<iostream>#include<stdio.h>#include<string.h>#include<string>using n ...

  7. 洛谷P1228 分治

    https://www.luogu.org/problemnew/show/P1228 我真傻,真的,我单知道这种题目可以用dfs剪枝过,没有想到还能构造分治,当我敲了一发dfs上去的时候,只看到一个 ...

  8. Vue less使用scope时渗入修改子组件样式

    @deep: ~'>>>'; .wrap { @{deep} .component1 { width: 120px; } }

  9. Hadoop记录-Hive调优:让任务并行执行

    set mapred.job.queue.name=pms;   //设置队列set hive.exec.reducers.max=8;  //设置最大的reducersset mapred.redu ...

  10. Linux记录-shell实现脚本监控服务器及web应用

    1.apache web 服务器 1 2 3 4 5 6 7 8 9 10 !/bin/bash # 表示请求链接3秒钟,不要返回的测试数据 nc -w 3 localhost 80 &> ...