Jquery.validate.js实现前端表单验证

2023-02-28 18:04:01JavaScript020

Jquery.validate.js实现前端表单验证,第1张

jquery.validate.js表单验证

官方网站： http://bassistance.de/jquery-plugins/jquery-plugin-validation/

API: http://jquery.bassistance.de/api-browser/plugins.html

当前版本：1.5.5

需要JQuery版本：1.2.6+, 兼容 1.3.2

(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、javascript校验

function check(){

var name=document.getElementById("username").value

var sp_inf_n=document.getElementById("inf_n")

if(name){

sp_inf_n.style="color:green"

sp_inf_n.innerHTML="*√"

}else{

sp_inf_n.style="color:red"

sp_inf_n.innerHTML="*请输入内容！"

}

</script>

2、运行效果

嘿嘿..上来提问的，刚好看到你的问题，就顺便帮你整理一段代码出来了，代码是我做项目中经常用到的，在这里给你做了一些简化..应该能够应付你大部分的工作了^^不够的话可以自己扩展...

代码部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>My Check Form</title>

</head>

//主函数

function CheckForm(oForm) {

var err_ele = null

var ele = oForm.elements

var haserror = false

//遍历所有表元素

for(var i=0i<ele.lengthi++) {

//过滤元素类型

if(ele.type != 'submit' &&ele.type != 'hidden' &&ele.type != 'button') {

//是否需要验证标签

var required = ele[i].getAttribute('required')

if(required!="undefined" &&(required==""||required=="true"||required=="yes") ) {

if(!validate(ele[i])) {

if(err_ele==null)

err_ele = ele[i]

haserror = true

break

}

//判断是否有没有通过验证的项目

if(haserror) {

err_ele.focus()

return false

} else {

return true

}

//得到表单元素的值

function getvalue(ele) {

var type = ele.getAttribute('type')

switch(type) {

case 'text':

case 'hidden':

case 'password':

case 'file':

case "select-one":

case 'textarea':

return ele.value

}

//检测函数

function validate(ele) {

//得到设定的检测函数

var fun = ele.getAttribute('fun')

//自定义提示语句

var custommsg = ele.getAttribute('msg')

if(fun!=null) {

var checkarr = executeFunc(fun,ele)

if(checkarr[2] == 'regxp') { //正则表达式处理

if(!regValidate(getvalue(ele),checkarr[0])) {

//如果有自定义提示语句则使用自定义提示语句

if(custommsg) {

alert(custommsg)

} else {

alert(checkarr[1])

}

return false

} else {

//RemoveSpan(ele)

}

} else if(checkarr[2] == 'custom') { //函数自行逻辑处理

//如果验证通过

if(!checkarr[0]) {

//如果有自定义提示语句则使用自定义提示语句

if(custommsg) {

alert(custommsg)

} else {

alert(checkarr[1])

}

return false

}

return true

}

//运行函数

function executeFunc(name,element) {

//匹配函数是否带有参数

if(name.match(/^[\w]+$[\w,\'\"]+$?$/)) {

return eval(name.replace(/^([\w]+)$([\w,\'\"]+)$?$/,'$1($2,element)'))

} else {

return eval(name.match(/^[\w]+$/) ? name : name + '()')

}

//判定某个值与表达式是否相符

function regValidate(value,sReg) {

//字符串->正则表达式,不区分大小写

var reg = new RegExp(sReg ,"i")

if(reg.test(value)) {

return true

} else {

return false

}

function UserName() {

var rt = new Array()

rt[0] = '^([a-zA-Z0-9]|[._]){4,19}$'

rt[1] = "用户名必须为4-19个字母和数字组成"

rt[2] = 'regxp'

return rt

}

function PassWord() {

var rt = new Array()

rt[0] = '^([a-zA-Z0-9]|[._]){6,19}$'

rt[1] = "密码必须为6-19个字母和数字组成"

rt[2] = 'regxp'

return rt

}

function notBlank(){

var rt = new Array()

rt[0] = "^\\S+$"

rt[1] = "该项不能为空,且不能含有空格!"

rt[2] = 'regxp'

return rt

}

function required(){

var rt = new Array()

rt[0] = "^\\S"

rt[1] = "该项不能为空!"

rt[2] = 'regxp'

return rt

}

//判断email

function isEmail() {

var rt = new Array()

rt[0] = "\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*"

rt[1] = "该项填写的EMAIL格式不正确！"

rt[2] = 'regxp'

return rt

}

//只能输入中文

function onlyZh() {

var rt = new Array()

rt[0] = "^[\u0391-\uFFE5]+$"

rt[1] = "该项只能输入中文！"

rt[2] = 'regxp'

return rt

}

//只可输入英文

function onlyEn() {

var rt = new Array()

rt[0] = "^[A-Za-z]+$"

rt[1] = "该项只能输入英文！"

rt[2] = 'regxp'

return rt

}

function enOrNum() {

var rt = new Array()

rt[0] = "^[A-Za-z0-9]+$"

rt[1] = "该项只能输入英文和数字,且不能有空格！"

rt[2] = 'regxp'

return rt

}

function isPhone() {

var rt = new Array()

rt[0] = "^((\$\\d{2,3}\$)|(\\d{3}\\-))?(\$0\\d{2,3}\$|0\\d{2,3}-)?[1-9]\\d{6,7}(\\-\\d{1,4})?$"

rt[1] = "应输入正确的电话号码格式！"

rt[2] = 'regxp'

return rt

}

// 自定义验证函数

function rePassword(ID,ele) {

var rt = new Array()

rt[0] = false

rt[1] = "再次密码输入不一致！"

rt[2] = 'custom'

var password = document.getElementById(ID).value

if(password != '' || ele.value != ''){

if(password == ele.value)

rt[0] = true

}

return rt

}

</script>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：如何基于HTML5实现数据统计饼图动画特效

# 下一篇：c语言中内循环是什么，外循环呢？我是新手请说详细点...

推荐阅读

热门文章

最新发布

标签列表

Jquery.validate.js实现前端表单验证

给您推荐相同类型的内容：