miniui中表单验证规则总结

页面链接：

http://www.miniui.com/demo/#src=form/rules.html

页面效果图：

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表单验证规则总结</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

<div id="form1" >
<table>
<tr>
<td class="td1">不允许为空：</td>
<td>
<input class="mini-textbox" required="true" />
</td>
<td class="td2">required="true"</td>
</tr>
<tr>
<td class="td1">必须是邮箱地址：</td>
<td>
<input class="mini-textbox" vtype="email" required="true"/>
</td>
<td class="td2">vtype="email"</td>
</tr>
<tr>
<td class="td1">必须是URL：</td>
<td>
<input class="mini-textbox" vtype="url" required="true"/>
</td>
<td class="td2">vtype="url"</td>
</tr>
<tr>
<td class="td1">必须是整数(int)：</td>
<td>
<input class="mini-textbox" vtype="int" required="true"/>
</td>
<td class="td2">vtype="int"</td>
</tr>
<tr>
<td class="td1">必须是数字(float)：</td>
<td>
<input class="mini-textbox" vtype="float" required="true"/>
</td>
<td class="td2">vtype="float"</td>
</tr>
<tr>
<td class="td1">字符串长度（<= 6）：</td>
<td>
<input class="mini-textbox" vtype="maxLength:6" required="true"/>
</td>
<td class="td2">vtype="maxLength:6"</td>
</tr>
<tr>
<td class="td1">字符串长度（>= 2）：</td>
<td>
<input class="mini-textbox" vtype="minLength:2" required="true"/>
</td>
<td class="td2">vtype="minLength:2"</td>
</tr>
<tr>
<td class="td1">字符串长度（2-6）：</td>
<td>
<input class="mini-textbox" vtype="rangeLength:2,6" required="true"/>
</td>
<td class="td2">vtype="rangeLength:2,6"</td>
</tr>
<tr>
<td class="td1">字符数个数（2-6）：</td>
<td>
<input class="mini-textbox" vtype="rangeChar:2,6" required="true"/>
</td>
<td class="td2">vtype="rangeChar:2,6"</td>
</tr>
<tr>
<td class="td1">数字范围（0-100）：</td>
<td>
<input class="mini-textbox" vtype="range:0,100" required="true"/>
</td>
<td class="td2">vtype="range:0,100"</td>
</tr>
<tr>
<td class="td1">必须是日期格式（如yyyy-MM-dd）：</td>
<td>
<input class="mini-textbox" vtype="date:yyyy-MM-dd" required="true"/>
</td>
<td class="td2">vtype="date:yyyy-MM-dd"</td>
</tr>
<tr>
<td class="td1">必须是日期格式（如MM/dd/yyyy）：</td>
<td>
<input class="mini-textbox" vtype="date:MM/dd/yyyy" required="true"/>
</td>
<td class="td2">vtype="date:MM/dd/yyyy"</td>
</tr>
<tr>
<td class="td1" style="color:Red;">邮箱格式，5~20个字符（组合）：</td>
<td>
<input class="mini-textbox" vtype="email;rangeLength:5,20;" required="true"/>
</td>
<td class="td2">vtype="email;rangeLength:5,20;"</td>
</tr>
<tr>
<td class="td1" style="color:Red;">必须输入英文（自定义）：</td>
<td>
<input class="mini-textbox" onvalidation="onEnglishValidation" />
</td>
<td class="td2">onvalidation="onEnglishValidation"</td>
</tr>
<tr>
<td class="td1" style="color:blue;">必须输入英文（自定义vtype）：</td>
<td>
<input class="mini-textbox" vtype="english"/>
</td>
<td class="td2">vtype="english"</td>
</tr>
<tr>
<td class="td1" style="color:Red;">必须输入英文+数字（自定义）：</td>
<td>
<input class="mini-textbox" onvalidation="onEnglishAndNumberValidation" />
</td>
<td class="td2">onvalidation="onEnglishAndNumberValidation"</td>
</tr>
<tr>
<td class="td1" style="color:Red;">必须输入中文（自定义）：</td>
<td>
<input class="mini-textbox" onvalidation="onChineseValidation" />
</td>
<td class="td2">onvalidation="onChineseValidation"</td>
</tr>
<tr>
<td class="td1" style="color:Red;">身份证验证15~18位（自定义）：</td>
<td>
<input class="mini-textbox" onvalidation="onIDCardsValidation" />
</td>
<td class="td2">onvalidation="onIDCardsValidation"</td>
</tr>
<tr>
<td></td>
<td>
<input value="Login" type="button" onclick="submitForm()" />
</td>
</tr>
</table>
</div>

function submitForm() {
var form = new mini.Form("#form1");

form.validate();
if (form.isValid() == false) return;

//提交数据
var data = form.getData();
var json = mini.encode(data);
$.ajax({
url: "../data/FormService.aspx?method=SaveData",
type: "post",
data: { submitData: json },
success: function (text) {
alert("提交成功，返回结果:" + text);
}
});
}
////////////////////////////////////////
function onEnglishValidation(e) {
if (e.isValid) {
if (isEnglish(e.value) == false) {
e.errorText = "必须输入英文";
e.isValid = false;
}
}
}
function onEnglishAndNumberValidation(e) {
if (e.isValid) {
if (isEnglishAndNumber(e.value) == false) {
e.errorText = "必须输入英文+数字";
e.isValid = false;
}
}
}
function onChineseValidation(e) {
if (e.isValid) {
if (isChinese(e.value) == false) {
e.errorText = "必须输入中文";
e.isValid = false;
}
}
}
function onIDCardsValidation(e) {
if (e.isValid) {
var pattern = /\d*/;
if (e.value.length < 15 || e.value.length > 18 || pattern.test(e.value) == false) {
e.errorText = "必须输入15~18位数字";
e.isValid = false;
}
}
}

////////////////////////////////////
/* 是否英文 */
function isEnglish(v) {
var re = new RegExp("^[a-zA-Z\_]+$");
if (re.test(v)) return true;
return false;
}

/* 是否英文+数字 */
function isEnglishAndNumber(v) {

var re = new RegExp("^[0-9a-zA-Z\_]+$");
if (re.test(v)) return true;
return false;
}

/* 是否汉字 */
function isChinese(v) {
var re = new RegExp("^[\u4e00-\u9fa5]+$");
if (re.test(v)) return true;
return false;
}

/*自定义vtype*/
mini.VTypes["englishErrorText"] = "请输入英文";
mini.VTypes["english"] = function (v) {
var re = new RegExp("^[a-zA-Z\_]+$");
if (re.test(v)) return true;
return false;
}

</script>

<div class="description">
<h3>Description</h3>
<p>

</p>
</div>
</body>
</html>

miniui中表单验证规则总结的更多相关文章

HTML5中表单验证的8种方法(转)
在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并 ...
HTML5中表单验证的8种方法
HTML5中表单验证的8种方法 2012-4-21 11:00| 发布者: benben| 查看: 2765| 评论: 0 摘要: 前一篇,我们介绍了HTML5中新的表单特性和函数, 今天就继续来谈谈 ...
miniui表单验证守则总结
1,页面效果图 2,代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
MiniUI表单验证总结
原文地址:https://www.cnblogs.com/wllcs/p/5607890.html 1,页面效果图 2,代码实现 <!DOCTYPE html PUBLIC "-/ ...
jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
YII 表单验证规则
官方文档:http://www.yiichina.com/guide/form.model 类参考手册:http://www.yiichina.com/api/CValidatorhttp://www ...
Yii 表单验证规则---总结
Filter: 过滤,'filter'=>'trim',表示去空格 Required:必须的,表示不能为空 Match: 匹配正则,需要和pattern一起使用,定义正则表达式,'pattern ...
CI设置表单验证规则
CodeIgniter 允许你为单个表单域创建多个验证规则,按顺序层叠在一起, 你也可以同时对表单域的数据进行预处理.要设置验证规则, 可以使用 set_rules() 方法: $this->f ...
v-show和element中表单验证validate起到的化学反应
说起v-show和v-if,进行前端开发的大家一定不会陌生,他们都是用来控制标签元素的显示与隐藏的,他们的区别就是v-show会把标签渲染出来,只是会隐藏起来,相当于visibility:hidden ...

随机推荐

python-nmap模块常用方法说明
一.模块常用方法说明本节介绍python-nmap模块的两个常用类,一个为PortScanner()类,实现一个nmap工具的端口扫描功能封装:另一个为PortScannerHostDict()类, ...
SQL 数据库学习 005 学习必备的一些操作 --- 如何新建数据库如何附加和分离数据库（如何备份还原数据库）如何删除数据库
我的电脑系统: Windows 10 64位使用的SQL Server软件: SQL Server 2014 Express 如果我们要学习这个数据库,我们需要学习什么知识.比如:如何新建一个数据库 ...
mybaties association 只返回一个结果问题处理
mybatis xml文件为: <resultMap id="BaseResultMap" type="com.test.SubscribeOrder"& ...
[C++] Returning values by reference in C++
A C++ program can be made easier to read and maintain by using references rather than pointers. A C+ ...
如何优雅地使用命令行设置windows文件关联
如何优雅地使用命令行设置windows文件关联使用ftype查看帮助设置关联所需命令有ftype assoc,需要管理员权限.如果忘记使用方法可通过ftype的帮助获取查看方法 C:\WINDOW ...
出现命令提示apt-get -f install的解决方法
提示apt-get -f install这个信息,然后查看其他的提示信息发现时缺少了一些以依赖库. 解决办法为执行:sudo apt-get -f install命令. 该命令的含义是去补全那些缺少的 ...
Java Persistence with MyBatis 3(中文版) 第三章使用XML配置SQL映射器
关系型数据库和SQL是经受时间考验和验证的数据存储机制.和其他的ORM 框架如Hibernate不同,MyBatis鼓励开发者可以直接使用数据库,而不是将其对开发者隐藏,因为这样可以充分发挥数据库服务 ...
vs下C# WinForm 解决方案里面生成的文件都是什么作用？干什么的？
Properties文件夹定义你程序集的属性项目属性文件夹一般只有一个 AssemblyInfo.cs 类文件,用于保存程序集的信息,如名称,版本等,这些信息一般与项目属性面板中的数据对应,不需 ...
HBASE的优化、hadoop通用优化，Linux优化，zookeeper优化，基础优化
HBase 的优化3.1.高可用在 HBase 中 Hmaster 负责监控 RegionServer 的生命周期,均衡 RegionServer 的负载,如果Hmaster 挂掉了,那么整个 HBa ...
一类适合初学者的DP:最大子段和与最大子矩阵
最近在水简单DP题,遇到了两道层层递进的DP题,于是记录一下一.最大子段和题意: 给出一个长度为n(n<=1e5)的序列,求连续子段的最大值比如说2 3 -4 5 的最大值是6 而 2 ...

miniui中表单验证规则总结

miniui中表单验证规则总结的更多相关文章

随机推荐

热门专题