Tim

一枚野生程序员~

  • 主页
  • 分类
  • 标签
  • 归档
  • 关于
所有文章 工具

Tim

一枚野生程序员~

  • 主页
  • 分类
  • 标签
  • 归档
  • 关于

Validate做表单校验

阅读数:次 2018-08-23
字数统计: 1.2k字   |   阅读时长≈ 5分

用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改。此时Validate做表单校验的特效药就发挥作用了!如果我们自己来写js代码的话,那么可就显得有些冲复造轮子了,所以现在Validate这个库可以很好的帮我们省略自己去写js校验代码,Validate这个库属于jQuery的插件库!

Validate下载

Validate的官网里面有示例代码,看这个就可以:https://jqueryvalidation.org 官网的介绍是:这个jQuery插件简化了客户端表单验证,同时还提供了大量的自定义选项。如果您正在从头开始构建校验代码,而且当您尝试将某些内容集成到具有大量现有代码的现有应用程序中时,它将是一个不错的选择。该插件捆绑了一组有用的验证方法,包括URL和电子邮件验证,同时提供API来编写自己的方法。所有捆绑方法都带有英语的默认错误消息,并翻译成其他37种语言。由此可见它的强大之处了!

Validate特点

  • 内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则
  • 自定义验证规则:可以很方便的自定义验证规则
  • 简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能
  • 实时验证:可以通过keyup或bulr事件触发验证,而不仅仅在表单提交的时候验证

Validate使用

1
2
3
4
<!--注意导入的顺序-->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="js/messages_zh.js" ></script>

这是我的简易示例表单:

mark

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validate使用示例</title>
<!--注意导入的顺序-->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="js/messages_zh.js" ></script>
<script>
$(function(){
$("#checkForm").validate({
rules:{
username:{
required:true,//不能为空
minlength:5,//长度必须大于等于5
maxlength:10,//最大长度是10
},
password:{
required:true,
digits:true,
minlength:6,
},
password2:{
required:true,
digits:true,
equalTo:"[name='password']"
}
},
messages:{
username:{
required:"用户名不能为空",
minlength:"用户名不得少于5个字符",
maxlength:"用户名最多10个字符"
},
password:{
required:"密码不能为空",
digits:"密码必须是整数",
minlength:"密码不得少于6位"
},
password2:{
required:"确认密码不能为空",
equalTo:"两次输入密码不一致"
}
}
});
});
</script>
</head>
<body>
<form action="#" id="checkForm">
<table border="0px">
<tr>
<td>用户名</td>
<td><input type="text" name="username"/><br></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"/></td>
<td></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="password2"/></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
</body>
</html>

下面是校验效果

mark

重点就在于设定校验的规则,常见的属性:

属性相关设定

属性 释义
required:true 必须输入的字段。
remote:”check.php” 使用 ajax 方法调用 check.php 验证输入值。
email:true 必须输入正确格式的电子邮件。
url:true 必须输入正确格式的网址。
date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
number:true 必须输入合法的数字(负数,小数)。
digits:true 必须输入整数。
creditcard: 必须输入合法的信用卡号。
equalTo:”#field” 输入值必须和 #field 相同。
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
range:[5,10] 输入值必须介于 5 和 10 之间。
max:5 输入值不能大于 5。
min:10 输入值不能小于 10
赏

谢谢你请我喝咖啡

支付宝
微信
  • 本文作者: Tim
  • 本文链接: https://zouchanglin.cn/246082244.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 许可协议。转载请注明出处!
  • 前端
  • Web开发

扫一扫,分享到微信

OpenCV矩阵掩模
链表相关问题
  1. 1. Validate下载
  2. 2. Validate特点
  3. 3. Validate使用
  4. 4. 属性相关设定
© 2017-2021 Tim
本站总访问量次 | 本站访客数人
  • 所有文章
  • 工具

tag:

  • 生活
  • Android
  • 索引
  • MySQL
  • 组件通信
  • Nginx
  • JavaSE
  • JUC
  • JavaWeb
  • 模板引擎
  • 前端
  • Linux
  • 计算机网络
  • Docker
  • C/C++
  • JVM
  • 上传下载
  • JavaEE
  • SpringCloud
  • Golang
  • Gradle
  • 网络安全
  • 非对称加密
  • IDEA
  • SpringBoot
  • Jenkins
  • 字符串
  • vim
  • 存储
  • 文件下载
  • Mac
  • Windows
  • NIO
  • RPC
  • 集群
  • 微服务
  • SSH
  • 配置中心
  • XML
  • Chrome
  • 压力测试
  • Git
  • 博客
  • 概率论
  • 排序算法
  • 分布式
  • 异常处理
  • 文件系统
  • 哈希
  • openCV
  • 栈
  • 回溯
  • SpringCore
  • 流媒体
  • rtmp
  • 面向对象
  • Vue
  • ElementUI
  • 软件工程
  • 异步
  • 自定义UI
  • ORM框架
  • 模块化
  • 交互式
  • Jsoup
  • Http Client
  • LRUCache
  • RabbitMQ
  • 消息通信
  • 服务解耦
  • 负载均衡
  • 权限
  • 多线程
  • 单例模式
  • Protobuf
  • 序列化
  • Python
  • m3u8
  • 堆
  • 二叉树
  • 自定义View
  • 观察者模式
  • 设计模式
  • 线程池
  • 动态扩容
  • 高可用
  • GC
  • ffmpeg
  • SpringMVC
  • REST
  • Redis
  • 缓存中间件
  • UML
  • Maven
  • Netty
  • 高性能网络
  • IPC通信
  • IO
  • Stream
  • 发布订阅
  • SQLite
  • Hash
  • 集合框架
  • 链表
  • Lambda
  • 汇编语言
  • 组件化
  • Router
  • 开发工具

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia-plus根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 思维导图
  • PDF工具
  • 无损放大
  • 代码转图
  • HTTPS证书