原文地址：https://www.cnblogs.com/wllcs/p/5607890.html

1，页面效果图

2，代码实现

  <!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" html-attribute-value" >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" html-attribute-value" >color:Red;">必须输入英文（自定义）：</td>
  <td>
  <input class="mini-textbox" onvalidation="onEnglishValidation" />
  </td>
  <td class="td2">onvalidation="onEnglishValidation"</td>
  </tr>
  <tr>
  <td class="td1" html-attribute-value" >color:blue;">必须输入英文（自定义vtype）：</td>
  <td>
  <input class="mini-textbox" vtype="english"/>
  </td>
  <td class="td2">vtype="english"</td>
  </tr>
  <tr>
  <td class="td1" html-attribute-value" >color:Red;">必须输入英文+数字（自定义）：</td>
  <td>
  <input class="mini-textbox" onvalidation="onEnglishAndNumberValidation" />
  </td>
  <td class="td2">onvalidation="onEnglishAndNumberValidation"</td>
  </tr>
  <tr>
  <td class="td1" html-attribute-value" >color:Red;">必须输入中文（自定义）：</td>
  <td>
  <input class="mini-textbox" onvalidation="onChineseValidation" />
  </td>
  <td class="td2">onvalidation="onChineseValidation"</td>
  </tr>
  <tr>
  <td class="td1" html-attribute-value" >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>
   
  <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>

MiniUI表单验证总结的更多相关文章

  1. miniui表单验证守则总结

    1,页面效果图 2,代码实现   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. Miniui 表单验证

    自定义表单验证: input输入框的表单验证可通过vtype和onvalidation事件两种方式实现 可编辑列表(例如div)的表单验证只能通过vtye来实现表单验证 (1)vtype方式: jsp ...

  3. MiniUI表单验证实践

    学习实践: <form id="form2"> <div id="update_pas" style="width:380px&qu ...

  4. MiniUI官方表单验证示例

    原文地址:http://www.miniui.com/docs/tutorial/validator.html 表单验证 参考示例: 验证规则     表单验证     表单验证:文本提示     表 ...

  5. miniui中表单验证规则总结

    页面链接: http://www.miniui.com/demo/#src=form/rules.html 页面效果图: 页面代码: <!DOCTYPE html PUBLIC "-/ ...

  6. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  7. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

  8. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（33）-MVC 表单验证

    系列目录 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端 ...

随机推荐

  1. 【转】VC和VS的区别

    各个版本之间的对应关系 使用windows平台搞开发时,下载第三方库时经常会遇到文件名以VCxx版本号命令,VC版本如何转换成对应的VS的版本呢,这里总结一下vc和vs的关系. Microsoft V ...

  2. IAR8.X安装教程

    安装教程 1.下载 2.安装 3.和谐 1.下载 打开官网  找到要下载的版本3. 下载8.4下载地址 不支持中文路径,有点坑https://netstorage.iar.com/SuppDB/Pro ...

  3. ThreadStatic特性

    文章:ThreadStatic特性 地址:https://www.cnblogs.com/xuejietong/p/10997385.html 带有threadStaticAttribute标记的静态 ...

  4. deb: No command ‘deb’ found

    deb: No command ‘deb’ found Posted on September 19, 2010 Let’s take a simple example of running the ...

  5. .net框架-队列（Queue）

    队列(Queue) 队列代表一个先进先出的集合 队列元素为Object类型 .net框架提供Queue<T>泛型队列类 入队(Enqueue)和出队(Dequeue)是对列的基本操作,入队 ...

  6. HtmlAgilityPack解析html文档

    一.概述 HtmlAgilityPack(以下简称HAP)是一个基于.Net的.第三方免费开源的微型类库,主要用于在服务器端解析html文档. HtmlAgilityPack为网页提供了标准的DOM ...

  7. IntelliJ IDEA12的解决占用C盘C:\Users\Administrator

    在安装完IntelliJ IDEA之后,默认会在windows的系统盘用户文件夹中创建配置等文件.在我只有32G的SSD盘中,怎么能让它如此,不爽呀..占用到现在都快1G了.好吧.今天把她解决了. 找 ...

  8. jquery刷新数据随机排列

    jquery 随机排列<li> 在线等 急... ul里 有六个li 每次刷新 li 的顺序就随机排列一次 求大神指点..... 代码如下:不会插入代码 只能截图了 <!DOCTYP ...

  9. 【DP】 路面修整 usaco 2008 feb_gold

    题目描述: ``` FJ打算好好修一下农场中某条凹凸不平的土路.按奶牛们的要求,修好后的路面高度应当单调上升或单调下降,也就是说,高度上升与高度下降的路段不能同时出现在修好的路中. 整条路被分成了N段 ...

  10. ps -ef、ps aux(查看进程占用内存大小)

    Linux下ps -ef和ps aux的区别及格式详解 Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区别呢?两者没太大差别,讨论这个问题,要追溯到Uni ...