【纵横科技】前端 三种 表单验证 有图哦

2024-01-26 22:48

本文主要是介绍【纵横科技】前端 三种 表单验证 有图哦,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原文:【纵横科技】前端 三种 表单验证 有图哦

源代码下载地址:http://www.zuidaima.com/share/1604388557818880.htm

(一)HTML5表单验证

【纵横科技】前端 三种 表单验证 有图哦

1.验证是否为空,在表单控件中将required特性设置为true。

1 <input type="text" name="myText" required>

 

2.指定表单控件的type特性值(如number、email、url等)。

1 <input type="email" name="email">
2  
3 <input type="url" name="url" >
4  
5 <input type="number" name="number" >

 

 

 

3.自定义匹配规则,配合title属性一起使用最好(pattern)

1 <input type="text" name="creditcardnumber" pattern="[0-9]{5}" title="5位数字,没有空格或破折号" >

 

4.限制长度(maxLength)。

1 <input type="text" name="limitedText" maxLength="5">

 

5.限制数值型控件,最小值、最大值和步长。

1 <input type="range" name="ageCheck" min="5" max="30" step="5">

 

6.自定义错误信息customError,调用setCustomValidity(message)后,控件就会处于无效状态,并且customError返回true。要清除错误,只需在控件上调用setCustomValidity("")即可。

1 <input type="text" name="customError" pattern="^\d{4}$" oninput="ce(this)" >
01 <script>
02 //customError
03 function ce(i){
04  
05     var v = i.validity;
06  
07         if(true !== v.valueMessing){
08  
09                if(true === v.patternMismatch){
10  
11                    i.setCustomValidity("请输入4位数字");
12  
13             }else{
14  
15                 i.setCustomValidity("");
16  
17             }
18  
19          }
20  
21      }
22  
23 </script>

 

以上功能不需要任何引用,HTML5虽然强悍,当然也有劣势不是所有浏览器都支持HTML5,想知道你的浏览器支不支持,访问http://html5test.com/index.html 就可以看到。

 

(二)基于jquery的Validate表单验证插件,它所提供的验证类型有:是否为空、数字、Email地址、判断输入值是否在某一范围内等,此外你也可以自定义验证规则,它也支持在一个输入框中使用多种验证规则。验证规则的提示信息是默认设置在JS文件中的,它也提供了函数让你可以自定义提示信息。

【纵横科技】前端 三种 表单验证 有图哦

1.默认校验规则 
(1)required:true 必输字段 
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值 
(3)email:true 必须输入正确格式的电子邮件 
(4)url:true 必须输入正确格式的网址 
(5)date:true 必须输入正确格式的日期 
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性 
(7)number:true 必须输入合法的数字(负数,小数) 
(8)digits:true 必须输入整数 
(9)creditcard: 必须输入合法的信用卡号 
(10)equalTo:"#field" 输入值必须和#field相同 
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀) 
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) 
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) 
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) 
(15)range:[5,10] 输入值必须介于 5 和 10 之间 
(16)max:5 输入值不能大于5 
(17)min:10 输入值不能小于10 

例子:

1 <input type="text" name="required" class="required">

 

2.自定义规则addMethod(name,method,message)

name是添加的方法的名字;

method是一个函数,接收三个参数(value,element,param) value是元素的值,element是元素本身 param是参数;

message:是自定义的错误提示

简单弄个例子,规则名af,只能输一个字母,范围是a-f。

01 $.validator.addMethod("af",function(value,element,params){   
02  
03      if(value.length>1){
04  
05           return false;
06  
07      }
08  
09      if(value>=params[0] && value<=params[1]){    
10  
11           return true;
12  
13      }else{
14  
15           return false;
16  
17      }
18  
19 },"必须是一个字母,且a-f");

用的时候,比如有个表单字段的id="username",则在rules中写

01 $("#form_id").validate({
02  
03     rules:{
04  
05         "af":{
06  
07              af:["a","f"]
08  
09         }
10  
11    }
12  
13 });

 

3.引用

1 <script src="assets/formvalidation/bassistance/js/jquery.validate.min.js"></script>
2  
3 <script src="assets/formvalidation/bassistance/js/lang/jquery.validate-zh_CN.js"></script>

初始化:

1 <script>
2  
3 $("#form_id ").validate();
4  
5 </script>

其它的就不一一介绍啦,有兴趣的搜索jquery Validate学习一下。

 

(三)基于jquery的validationEngine表单验证插件,根据官网提示,该插件支持IE6-8,Chrome浏览器,火狐,Safari,Opera 10,但由于有使用到了css3的阴影和圆角样式,所以在IE浏览器下无法看到圆角和阴影效果(IE 9 支持圆角效果),整体来说还是不错的。

【纵横科技】前端 三种 表单验证 有图哦

1.默认校验规则 

名称

示例

说明

required

validate[required]

表示必填项

optional

validate[optional]

表示可选项。若不输入,不要求必填,若有输入,则验证其是否符合要求。

dateRange[name]

validate[dateRange[grp1]]

验证日期范围

dateTimeRange[name]

validate[dateTimeRange[grp1]]

验证日期及时间范围

minSize[int]

validate[minSize[6]]

最少输入字符数

maxSize[int]

validate[maxSize[20]]

最多输入字符数

groupRequired[name]

validate[groupRequired[grp2]]

群组中至少输入一项

min[int]

validate[min[1]]

最小值(该项为数字的最小值,注意与 minSize 的区分)

max[int]

validate[max[9999]]

最大值(该项为数字的最大值,注意与 maxSize 的区分)

past[date]

validate[past[2012/12/20]]

日期必需在 date 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now

future[date]

validate[future[now]]

日期必须在 data 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now

maxCheckbox[int]

validate[maxCheckbox[2]]

最多选取的项目数(用于Checkbox)

minCheckbox

validate[minCheckbox[2]]

最少选取的项目数(用于Checkbox)

equals

validate[equals[id]]

当前控件值需与 id 这个控件的值相同

phone

validate[custom[phone]]

验证电话号码

email

validate[custom[email]]

验证 Email 地址

integer

validate[custom[integer]]

验证整数

number

validate[custom[number]]

验证数字

date

validate[custom[date]]

验证日期,格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D

dateFormat

validate[custom[dateFormat]]

验证日期格式,格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D

dateTimeFormat

validate[custom[dateTimeFormat]]

验证日期及时间格式,格式为:YYYY/MM/DD hh:mm:ss AM|PM

ipv4

validate[custom[ipv4]]

验证 ipv4 地址

url

validate[custom[url]]

验证 url 地址,需以 http://、https:// 或 ftp:// 开头

onlyNumberSp

validate[custom[onlyNumberSp]]

只接受填数字和空格

onlyLetterSp

validate[custom[onlyLetterSp]]

只接受填英文字母(大小写)和单引号(')

onlyLetterNumber

validate[custom[onlyLetterNumber]]

只接受数字和英文字母

ajax

validate[ajax[ajaxUserCallPhp]]

在验证规则中自定义

"ajaxUserCallPhp":{

"url":"phpajax/ajaxValidateFieldUser.php",

"extraData":"name=eric",

"alertTextOk":"* 此帐号名称可以使用",

"alertText":"* 此名称已被其他人使用",

"alertTextLoad":"* 正在确认帐号名称是否有其他人使用,请稍等。"

}

funcCall

validate[funcCall[functionName]]

调用外部函数

验证规则均写在 validate[] 中,如有多条规则,用英文逗号(,) 分割,如:

1 <input type="text" name="first_name" class="validate[required,minSize[6],custom[onlyLetterNumber]]">

 

2.引用

1 <link rel="stylesheet" href="assets/formvalidation/validationengine/css/jquery.validationEngine.min.css">
2  
3 <script src="assets/formvalidation/validationengine/js/lang/jquery.validationEngine-zh_CN.js"></script>
4  
5 <script src="assets/formvalidation/validationengine/js/jquery.validationEngine.min.js"></script>

 

初始化:

 

1 <script>
2  
3 $("#form_validate_tooltip").validationEngine();
4  
5 </script>

附上官网的API在附件中,里面讲的更详细,其它的就不一一介绍啦,有兴趣的看一下。


这篇关于【纵横科技】前端 三种 表单验证 有图哦的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/648307

相关文章

vue, 左右布局宽,可拖动改变

1:建立一个draggableMixin.js  混入的方式使用 2:代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档:https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址:https://github.com/Hufe921/canvas-editor 前提声明: 由于CanvasEditor目前不支持vue、react 等框架开箱即用版,所以需要我们去Git下载源码,拿到其中两个主

React+TS前台项目实战(十七)-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装,可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 (1)通过position属性,可以控制下拉选项的位置 (2)通过传入width属性, 可以自定义下拉选项的宽度 (3)通过传入classN

android 免费短信验证功能

没有太复杂的使用的话,功能实现比较简单粗暴。 在www.mob.com网站中可以申请使用免费短信验证功能。 步骤: 1.注册登录。 2.选择“短信验证码SDK” 3.下载对应的sdk包,我这是选studio的。 4.从头像那进入后台并创建短信验证应用,获取到key跟secret 5.根据技术文档操作(initSDK方法写在setContentView上面) 6.关键:在有用到的Mo

js+css二级导航

效果 <!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><meta http-equiv="Con

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页:

vue+el国际化-东抄西鉴组合拳

vue-i18n 国际化参考 https://blog.csdn.net/zuorishu/article/details/81708585 说得比较详细。 另外做点补充,比如这里cn下的可以以项目模块加公共模块来细分。 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包const cn = {mess

vue同页面多路由懒加载-及可能存在问题的解决方式

先上图,再解释 图一是多路由页面,图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应,并且图二的路由层在跟图一对应的页面中要加上components层,多一个s结尾,里面的的方法名就是图一路由的name值,里面还可以照样用懒加载的方式。 页面上其他的路由在路由文件中也跟图二是一样的写法。 附送可能存在

vue+elementUI下拉框联动显示

<el-row><el-col :span="12"><el-form-item label="主账号:" prop="partyAccountId" :rules="[ { required: true, message: '主账号不能为空'}]"><el-select v-model="detailForm.partyAccountId" filterable placeholder="

vue+elementui分页输入框回车与页面中@keyup.enter事件冲突解决

解决这个问题的思路只要判断事件源是哪个就好。el分页的回车触发事件是在按下时,抬起并不会再触发。而keyup.enter事件是在抬起时触发。 so,找不到分页的回车事件那就拿keyup.enter事件搞事情。只要判断这个抬起事件的$event中的锚点样式判断不等于分页特有的样式就可以了 @keyup.enter="allKeyup($event)" //页面上的//js中allKeyup(e