如今很多的网站偶会有不同层次的验证去验证用户输入的信息是否符合我们所需要的数据类型。并且可以说任何有输入的地方都需要的去验证，验证一方面是要求用户输入正确格式的数据，同时也是避免恶意的用户进行非法的输入从而攻击网站。其中危害比较大的自然就是跨站脚本。而最近正好有一个大项目需要，所以就写了一篇关于前段验证脚本的教程，其基础为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 ：”输入的类型不是日期时提示的消息“

Xamarin.Android -> Xamarin.IOS -> 混合 -> Xamarin.Forms

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

  1. 使用 jQuery 进行前端验证

    前段验证脚本的教程,其基础为jQuery的插件validate.    一.可以验证哪些信息 要求输入不能为空 要求输入格式必须为电子邮箱 要求输入格式必须为URL 要求输入格式必须为日期 要求输入格 ...

  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. leetcode problem 41 -- First Missing Positive

    Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0]  ...

  2. mysql---多表关联

    首先要介绍一下集合的概念:集合具有无序性.唯一性. 无序性:指集合内部元素没有相对顺序的概念,对于两个集合而言,只要元素值和元素个数相同则两个集合相等. 唯一性:指集合内部元素不存在值相等的元素. 上 ...

  3. ViewState压缩

    /// <summary> ///CompressViewState 的摘要说明 /// </summary> public class CompressViewState:S ...

  4. 盗链网易163、腾讯QQ、新浪sina、百度Baidu的图片之PHP独立版

    网易相册频道,网易相册确实是一个高质量图片的地方,而且免费,唯一缺点是很多加了水印,但这个不重要了,无意间发现网易163相册频道的图片是防止盗链的,于是便自己写了一个小程序来突破这个. 本盗链图片最新 ...

  5. platform_driver_register()--如何match之后调用probe

    int platform_driver_register(struct platform_driver *drv) { drv->driver.bus = &platform_bus_t ...

  6. 【重构】m站重构思路

    不重构全部模块,只对以下内容做基础重构就可以,第三方方式 1.验证码作为独立的服务,用户写入验证码获得id,服务端获取验证码id对应内容(根据时间和存储空间 清理验证码) 2.支付接口h5环境独立配置 ...

  7. 关于JAVA面向对象基础整理以及个人的理解(适合初学者阅读)

    JAVA的基础语法等都跟C有很大的相似之处,所以这里就不多啰嗦了.直接从数组开始. 数组: 1.声明 int [] a; 在声明的过程中,并没有分配空间给数组.我们可以在声明的同时,用new来分配相应 ...

  8. 如何在 Java 中正确使用 wait, notify 和 notifyAll – 以生产者消费者模型为例

    wait, notify 和 notifyAll,这些在多线程中被经常用到的保留关键字,在实际开发的时候很多时候却并没有被大家重视.本文对这些关键字的使用进行了描述. 在 Java 中可以用 wait ...

  9. Automotive Security的一些资料和心得（5）：Privacy

    1. Introduction 1.1 "Customers own their data and we can be no more than the trsted stewards of ...

  10. Tesseract 3.02中文字库训练

    Tesseract 3.02中文字库训练 下载chi_sim.traindata字库下载tesseract-ocr-setup-3.02.02.exe 下载jTessBoxEditor用于修改box文 ...