【纵横科技】前端 三种 表单验证 有图哦
来源:互联网 发布:淘宝怎么收钱 编辑:程序博客网 时间:2024/05/22 05:16
原文:【纵横科技】前端 三种 表单验证 有图哦
源代码下载地址: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]]
验证电话号码
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在附件中,里面讲的更详细,其它的就不一一介绍啦,有兴趣的看一下。
- 【纵横科技】前端 三种 表单验证 有图哦
- 中国科技纵横
- 《中国科技纵横》杂志
- 《中国科技纵横》杂志
- js 表单前端验证
- 前端表单验证插件
- anular前端表单验证
- magento2 前端表单验证
- [js]前端表单验证
- 中国科技纵横》杂志社 征
- 数据验证【web前端,表单】
- WEB前端-JQuery-表单验证
- form表单提交,前端验证
- js 前端验证表单输入
- 前端表单js验证笔记
- 三种JQuery表单验证方式
- 表单验证(三种写法)
- php 表单提交 表单前端验证
- Android Drawable和Bitmap区别
- 01背包及其优化
- bat命令
- 算法竞赛入门经典:第七章 暴力求解法 7.8子集生成
- iOS经典网络开源库(整理)
- 【纵横科技】前端 三种 表单验证 有图哦
- win2012部署asp网站相关
- 快速打开hosts
- 串口之GetCommState、SetCommState函数详解
- HDU 1869 六度分离 dijkstra&&dsfa
- 算法竞赛入门经典:第七章 暴力求解法 7.9位向量法
- Function调用PropUtil读取配置文件数据
- arm底板中linux程序的运行
- 百度编辑器umeditor使用总结