前段验证脚本的教程，其基础为jQuery的插件validate。

   一、可以验证哪些信息

  • 要求输入不能为空
  • 要求输入格式必须为电子邮箱
  • 要求输入格式必须为URL
  • 要求输入格式必须为日期
  • 要求输入格式必须为数字
  • 要求输入格式必须为整数
  • 要求输入必须和指定输入框内容相同
  • 要求输入必须大于指定字符长度
  • 要求输入必须小于指定字符长度
  • 要求输入必须在指定字符长度范围内
  • 要求输入数字必须大于指定数值
  • 要求输入数字必须小于指定数值
  • 要求输入数字必须在指定数值范围内
  • 要求必须选择项
  • 要求必须选择不少于指定项
  • 要求必须选择不大于指定项
  • 要求必须选择在指定范围内的项数量

虽然默认已经自带了许多日常中所需要的验证，但是客户的需求是不断改变的。但是这个插件已经想到了以后的功能扩展，通过指定的方法可以将设计者自定义的验证功能嵌入进validate插件中，并且不会破坏原有的验证功能。但日常很多地方上面提供的验证功能已经可以解决了很多了。所以我们下面将会以上面这些提供的验证逐一介绍如何使用。

因为特殊的需求，所以我个人改变了错误信息呈现的方式，不是以label的方式呈现，而是更加友好更加动态的方式呈现错误提示信息。但由于需要技术保留，所以不能提供下载。但是所有的功能都可以实现的。

   二、快速学习

验证基本上都是验证表单中的输入内容，所以首先需要指定验证的表单:

 1 <body>

 2   <form name="form1">

 3     <table>

 4       <tr>

 5         <td><label for="us">UserName:<input type="text" name="us" id="us" /></label></td>

 6       </tr>

 7       <tr>

 8         <td><label for="pwd">PassWord:<input type="password" name="pwd" name="pwd" /></label></td>

 9       </tr>

10     </table>

11   </form>

12 <script type="text/javascript">

13    $(function(){

14        $("#form1").validate();

15      });

16 </script>

17 </body>

其中的“ $("#form1").validate(); ” 是最重要的，如果需要验证必须使用该代码，否则无法实现验证。如果指定的表单不同验证时只验证指定表单。

  三、漫漫学习

  1. 实现输入内容不能为空

    <input type="text" name="in" nValidate="{required:true}" />

    其中最重要的是   nValidate="{required:true}"  并且以后需要添加任何验证功能都要在 nValidate 中进行修改.

  2. 实现输入内容必须为电子邮箱 
    <input type="text" name="ceemail" nValidate="{email:true}" />

    看到其中的 email:true  相信很多人都应该可以猜出后面如何使用不同的验证了。

  3. 实现输入内容必须为电子邮箱，且不能为空 
    <input type="text" name="ceemail" nValidate="{required:true,email:true}" />

    这里我们使用了组合的方式将电子邮箱的验证功能和输入内容不能为空的验证功能同时启用，那么就可以实现必须输入内容并且输入的内容必须符合电子邮箱的格式。

  4. 实现输入内容必须为URL 
    nValidate="{url:true}"

    为了更快速的学习，下面将会列出参数名称以及冒号后面所需要填写的参数和类型

  5. 实现输入内容必须为日期

    date:true

  6. 实现输入内容必须为数字

    number:true

  7. 实现输入内容必须为整数

    digits:true

  8. 实现输入内容必须和指定输入框内容相同

    equalTo:'#id'

    参数说明:
    id : 指定内容相同的输入框id

  9. 实现输入内容必须大于指定字符长度

    minlength:size
    参数说明:
    size : 指定字符串的长度

  10. 实现输入内容必须小于指定字符长度

    maxlength:size
    参数说明:
    size : 指定字符串的长度

  11. 实现输入内容必须在指定字符长度范围内

    rangelength:[minsize,maxsize]
    参数说明:
    minsize : 最短字符长度
    maxsize : 最长字符长度

  12. 实现输入数值必须大于指定数值

    min : num
    参数说明:
    num : 最小数值（输入的数值可以等于这个数值）

  13. 实现输入数值必须小于指定数值

    max : num
    参数说明:
    num : 最大数值（输入的数值可以等于这个数值）

  14. 实现输入数值必须在指定数值范围内

    range : [minnum,maxnum]
    参数说明:
    minnum : 最小数值
    maxnum : 最大数值

四、自定义提示消息
          上面的学习仅仅是学习了如何使用该验证，但是对于用户而言，他并不知道哪里错了，为什么错的。所以我们经常需要提示用户输入的内容具有什么错误。虽然我已经内置了中文的提示信息，但是那只是比较死板的，真实的情况中，我们必须根据该输入框要求输入的内容更加友好的提示用户的输入到低具有什么错误，如何纠正。所以下面我们即将学习如何自定义提示的消息内容。

通用属性 -- messages

如果是设置不同输入错误的提示信息，必须在"messages"下进行增加修改，如下:

1 <input type="text" name="test2" nValidate="{required:true,messages:{required:'用户名不能为空'}}"

对于上面的输入框，如果用户没有输入用户名则会提示用户“用户名不能为空”，而默认的是“字段不能为空”，一看就可以感觉到友好度更高了。
 并且可以设置不同错误类型所提示的消息,如下:

<input type="text" name="test1" nValidate="{required:true,number:true,minlength:5,maxlength:120,messages:{required:'请输入年龄',number:'请输入数字',minlength:'年龄不可以小于{0}岁',maxlength:'年龄不可以大于{0}岁'}}" />

以上的代码将可以实现要求用户输入正确年龄的操作，并且不能为空，且输入的年龄范围必须在5~120岁之间，否则将会显示对应的错误，比如用户不输入内容则提示“请输入年龄”，输入的内容为非数值类型则提示：“请输入数字”，输入的数值小于5则提示：“年龄不可以小于5岁”，输入的数值大于120岁则提示：“年龄不可以大于120岁”，其中的”{0}“，后台jQuery将会用我们设置”minlength“和”maxlength“中的数值替换掉。这样就可以自定义消息了。：“请输入数字”，

下面将陈列可以自定义消息的输入验证，因为很多都已经封装，所以前台就这么简单了。

required : “输入为空时提示的消息”

number ：”输入类型非数值类型时提示的消息“

minlength ：”输入内容的字符创长度小于参数设置的值时提示的消息“       存在参数 {0} 为 minlength 设置的值

maxlength : ”输入内容的字符长度大于参数设置的值时提示的消息“         存在参数 {0} 为 maxlength 设置的值

rangelength : ”输入内容的字符长度不在指定范围长时提示的消息“          存在参数 {0} 为最短长度 {1} 为最长长度

min : ”输入的数值小于参数设置的值时提示的消息“       存在参数{0} 为 min 设置的值

max ：”输入的数值大于参数设置的值时提示的消息“     存在参数{0} 为 max 设置的值

range ： ”输入的数值不在指定范围时提示的消息“       存在参数{0} 为最小数值的值 {1} 为最大数值的值

email : ”输入内容不符合邮箱地址时提示的消息“

url : "输入的内容不符合URL地址时提示的消息"

digits ：”输入的类型不是整数时提示的消息“

date ：”输入的类型不是日期时提示的消息“

前端和后端的输入合法性验证

前端输入合法性的验证：

前端页面：

<div class = "col-12">
<div class="kx-form-group">
<lable class="col-6 kx-control-lable"><i class="red-cue">*</i>sim卡号<lable>
<input type="text class="col-12 form-text" ng-model="xxx" name="simCardNo" ng-blur="checkSimCardNo()"/>
<span id="checkSimCard" style="display:none">请输入字母或数字</span>
</div>
</div>
前端js：
var reg = /^[0-9a-zA-Z]*$/;
var csc=document.getElementById("checkSimCard");
$scope.checkSimCardNo = function(){
if(!reg.test($scope.myPosDeviceVo.simCardNo)){
csc.style.display="block";
$scope.myPosDeviceVo.simCardNo=undefined;
}
}
后端输入合法性的验证：

后端合法性验证需要改动三个地方：1.Vo类或者Model类需要加注解；2.数据库要自定义提示信息；3.前端页面需要在form中加validator=""和data-invalid-msg=""等必要信息。

1.在Vo类或者Model类中加注解

在我们需要验证的地方加注解例如@Require，@Length

例子：public class Xxj，里面包含属性如下

@Require(groups = {Save.class,Update.class})//require表示必填，也有其他注解如@Length和@Max分别表示字符串长度和能够表示的最大值

private String DeviceNo;

然后定义接口，例如：

public static interface Save{}

public static interface Update{}

这里的两个接口与上面的Save.class还有Update.class对应，用来区分在什么时候会用到这个字段的自定义提示，是在保存的时候，还是在更新的时候，名称可以自己定义。

在写完注解和接口之后如果我们启动tomcat会发现生成了两对js文件，每一对分别命名为Xxj_Save和Xxj_Update(这就是那两个接口的作用了)，分别放在不同的目录下，一个是校验规则js一个是校验提示js。根据这两个js来发送提示信息。

注意：在business目录下的source/main/resource/properties目录下有一个application.properties文件，可以在里面配置那两个js的生成路径;application.properties文件里面也需要配置你的Vo类或者model类的路径。

2.数据库自定义提示信息

对应的数据库需要插入一些提示数据

key locale_id message latest_time
Require.xxj.deviceNo 1 设备号不能为空 ***
Require.xxj.deviceNo 2 DeviceNo Not Null ***
key列中的Require就是注解的字段，message为提示信息
在数据库中设置key列中的值时，注意大小写，因为在生成js的时候会默认的第一个单词是小写的。

3.在前端页面中写代码

<form g-validator="Xxj_Save" data-invalid-msg="tooltipMessenger">

对应input里面应该有个属性name=“deviceNo”

然后运行，看效果。
---------------------

使用 jQuery 进行前端验证的更多相关文章

  1. 使用 jQuery 进行前端验证 -- 1

    如今很多的网站偶会有不同层次的验证去验证用户输入的信息是否符合我们所需要的数据类型.并且可以说任何有输入的地方都需要的去验证,验证一方面是要求用户输入正确格式的数据,同时也是避免恶意的用户进行非法的输 ...

  2. jQuery.validationEngine前端验证

    引入相关文件: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type ...

  3. jQuery Validate前端验证

    我们经常看到如下效果,那么它是如何实现的呢?看下面: 废话少说,直接上代码,大家直接Copy就能看到上面的效果啦. <html> <head> <title>验证内 ...

  4. jQuery结合Ajax实现简单的前端验证和服务端查询

    上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 <form nam ...

  5. Javascript配合jQuery实现流畅的前端验证

    做前端时一般都习惯用JavaScript进行表单的简单验证比如非空验证和正则表达式验证,这样过滤后的数据提交到服务端再由专门的控制器做数据处理,这样能减轻服务器的负担,下面看一下前端验证的简单步骤: ...

  6. 关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）

    废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...

  7. 简单的jQuery前端验证码校验

    简单的jQuery前端验证码校验2 html; <!DOCTYPE html> <html lang="zh-cn"> <head> <m ...

  8. jquery前端验证框架

    1.validationEngine.jquery.css  样式包 2.jquery.validationEngine-zh_CN.js 中文语言包 3.jquery.validationEngin ...

  9. 修改.net mvc中前端验证信息的显示方式

    最近一直在学习.net core的用法.想法是通过写一个新闻系统来熟悉一下这个最新的技术.其实,我以前一直对.net技术都是浅尝辄止,最主要原因是没有动力.平时写企业站因为时间原因,不是使用php的框 ...

随机推荐

  1. pandas 数据类型转换

    数据处理过程的数据类型 当利用pandas进行数据处理的时候,经常会遇到数据类型的问题,当拿到数据的时候,首先需要确定拿到的是正确类型的数据,一般通过数据类型的转化,这篇文章就介绍pandas里面的数 ...

  2. 第一次php之旅

    话说起来,我也是刚接触php不久,刚开始是因为想自己做一个从前端到后台完整的网站,所以去学后台技术,在各种语言的选择中,由于php语言的简单,易学,功能强大,开发速度快等原因,最终我选择了php! 一 ...

  3. TOP100summit：【分享实录】Twitter 新一代实时计算平台Heron

    本篇文章内容来自2016年TOP100summit Twitter technical lead for Heron Maosong Fu 的案例分享. 编辑:Cynthia Maosong Fu:T ...

  4. Oracle备份恢复之Oracle11G R2用exp无法导出空表解决方法

    在11G R2中有个新特性,当表无数据时,不分配segment,以节省空间Oracle当然在执行export导出时,空表则无法导出,但是还是有解决办法的: 解决方法: 一.insert一行,再roll ...

  5. python面向对象高级：@property

    @property 把方法『变成』了属性,广泛应用在类的定义中,可以让调用者写出简短的代码,同时保证对参数进行必要的检查,这样,程序运行时就减少了出错的可能性. 最大的作用就是既能检查参数,又可以用类 ...

  6. 2018/03/21 每日一个Linux命令 之 scp

    在平常的工作和学习中,难免要和远程服务器产生一些文件的交互. 当然也有 xftp 这种工具在,干的事情是一样的,不过今天还是介绍命令行下 scp 的用法,毕竟每天都在和命令行打交道. -- scp 命 ...

  7. QtCore是Qt的精髓（包括五大模块：元对象系统，属性系统，对象模型，对象树，信号槽）

    作者:小豆君的干货铺链接:https://www.zhihu.com/question/27040542/answer/218384474来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...

  8. 换个字体解决Dreamweaver文字选不中的问题

    在使用Dreamweaver时,有时我们要选中一些字符进行编辑或删除,光标在英文字上面可以选中,在中文字上面就选不中,郁闷吧.比如在编辑下面这段文字的时候,如图所示, 想选中“你难得已经忘了吗?”,当 ...

  9. [py]约瑟夫问题-循环队列

    约瑟夫问题(历史战争问题) 直观理解 老外视频讲解 模拟器演示 约瑟夫问题 数学姥公众号 讲的最清楚 背景及,推倒过程讲解得很清晰,旨在提高人们对数据的兴趣 简单说下: 几个人围成一圈(循环队列), ...

  10. [LeetCode] 458. Poor Pigs_Easy tag: Math

    There are 1000 buckets, one and only one of them contains poison, the rest are filled with water. Th ...