miniui中表单验证规则总结

最新推荐文章于 2020-04-22 21:14:09 发布
最新推荐文章于 2020-04-22 21:14:09 发布
阅读量579 收藏
点赞数
文章标签： xhtml json javascript ViewUI
原文链接：http://www.cnblogs.com/wllcs/p/5868129.html
版权

页面链接：

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" />


<script src="../../scripts/boot.js" type="text/javascript"></script>


<style type="text/css">
.td1
{
text-align:right;
}
.td2
{
padding-left:15px;
font-size:13px;
font-family:Tahoma;
}
</style>
</head>
<body>
<h1>表单验证规则总结</h1>

<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" οnclick="submitForm()" />
</td>
</tr>
</table>
</div>

<script type="text/javascript">
mini.parse();

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>

 

转载于:https://www.cnblogs.com/wllcs/p/5868129.html

MiniUI快速入门教程（四）表单开发
Ling_PF的博客
07-18 9787
表单开发包括：布局、验证、加载、提交、清除、重置等。 效果图如下： 表单布局 使用HTML Table标签实现任意丰富的表单布局： table class="form-table" border="0" cellpadding="1" cellspacing="2"> tr> td class="form-label" style="width:60px;
jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）
小熊一乐的博客
07-27 751
1.表单验证插件——validate   该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：   $(form).validate({options})   其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。         2.表单插件——fo
miniui表单验证规则总结
04-17 2525
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     表单验证规则总结                             .td1     {         text-align:right;     }     .t
MiniUI官方表单验证示例
weixin_30295091的博客
07-13 430
原文地址：http://www.miniui.com/docs/tutorial/validator.html 表单验证 参考示例：验证规则表单验证表单验证：文本提示表单验证：组合验证 绑定validation事件 <input id="username" name="username" onvalidation="onUserNa...
miniui表单验证守则总结
woodking
10-13 4060
miniui表单验证守则总结 转载：https://www.cnblogs.com/wllcs/p/5607890.html 1，页面效果图 2，代码实现   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit...
Miniui树形和验证
11-30
MiniUI提供了丰富的验证规则，包括非空验证、长度验证、格式验证（如邮箱、电话号码）、自定义函数验证等。用户可以使用预设的验证规则，也可以根据需求编写自己的验证逻辑。验证结果将以醒目的方式反馈给用户，提升...
miniUI中如何实现前端数据验证
前端数据验证是指在前端页面中对用户输入的数据进行合法性验证的过程。通过对用户输入的数据进行验证，可以保证数据的准确性、完整性和安全性，提高用户体验和系统的稳定性。 在Web开发中，前端数据验证是一个非常...
miniuiDemo
12-03
MiniUI的数据单元格可以设置样式、格式化数据，还支持各种验证规则，确保输入数据的有效性。 4. **数据网格（Datagrid）**：数据网格是一种强大的组件，用于展示大量结构化的数据。它通常包含可排序、过滤、分页的...
mini Ui表格中单元格编辑添加校验规则
qq_35915357的博客
04-22 1853
mini Ui表格中单元格编辑添加校验规则 ** 这两天做项目的时候遇到一个需求dataGrid某一列可编辑列与某一列或者一个变量做比较** 首先想到了三种实现方式：onblur、onValidation以及在保存按钮事件中增加循环遍历校验（两写法） <div id="dataGrid" dataFiled="infos" class="nui-datagrid"> <d...
js校验纯数字
07-22
js校验纯数字，我会多多上传资料的，请多多关照我哈。
JavaScript校验Number(4,1)格式的数字实例代码
12-07
项目里面有个录入，需要数字格式进行校验，前端使用的是miniUI框架，miniUI文档里面自带了校验，vtype=”float”,校验浮点数的，但是它不能做到校验这个浮点数有几位整数和几位小数，所以就有必要重写写一个js函数来校验： 实现思路： 1.获取所填写的值 2.判断是否为空，不为空执行3 3.对字符串trim()去空格,并且判断以”.”开始或者结尾的都不是合法的数字，给出提示。 4.提前判断字符串是否是true或者false，因为下面要使用Number函数，它可以把true和false转为1和0，所以需要在使用之前作判断，如果字符串是这个则给出提示 5.对字符串使用Number函数转型
Miniui 表单验证
weixin_30675247的博客
04-13 855
自定义表单验证： 　　input输入框的表单验证可通过vtype和onvalidation事件两种方式实现 　　可编辑列表（例如div）的表单验证只能通过vtye来实现表单验证 （1）vtype方式： 　　jsp页面通过属性设置：vtype="NaN" 　　js： //验证课程列表中的内容是否全为数字 mini.VTypes["NaN"] = function (v) { ...
miniui 文本框验证
weixin_34018169的博客
08-22 884
原文 ： http://www.miniui.com/demo/#src=form/rules.html 转载于:https://www.cnblogs.com/xinbaba/p/7411616.html
jquery formValidator插件ajax验证，在内容不做修改的前提下提示错误的bug解决方法
东亮博客
08-01 1897
query formValidator插件非常好用，但是有一个严重的Bug，在使用ajax验证的时候，如果输入框的内容已经存在，把鼠标放到输入框，不做任何修改再离开，则会提示错误， 这是这个插件犯的一个很愚蠢的错误 oneIsValid: function(id, i
正则表达式实战：简化表单验证规则
在本篇文章中，我们将深入探讨如何利用正则表达式在Web前端进行简单的表单验证。首先，我们注意到提供的CSS样式定义了用于展示验证信息的`.warn`类，以及不同级别的提示框`.warn span`和`.warn strong`，这些用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值