jQuery formValidator表单验证

2024-12-13 18:32:25

作为一名程序员，在解决工作中遇到问题之后，做一些总结是有必要的，既方便总结温习相关知识点，也为广大的程序员提供了一些工作经历，给予同行一面明鉴.

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formValidator</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/formValidator-4.0.1.min.js"></script>
<script src="js/DateTimeMask.js"></script>
<script src="js/formValidatorRegex.js"></script>
<link rel="stylesheet" href="css/validator.css">
<style>
form{
width: 500px;
margin: 100px auto;
}
table tr td:first-child{
text-align: right;
}
table tr td{
padding: 5px 0;
}
div{
margin-left: 10px;
padding: 0 10px;
}
</style>
</head>
<body>
<form name="myfm" id="myfm" action="1.html">
<table>
<tbody>
<tr>
<td><label for="uname">用户名：</label></td>
<td><input type="text" id="uname" name="uname"/></td>
<td><div id="unameTip"></div></td>
</tr>
<tr>
<td><label for="pwd">密码：</label></td>
<td><input type="password" id="pwd" name="pwd"/></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td><label for="repwd">重复密码：</label></td>
<td><input type="password" name="repwd" id="repwd"/></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td><label>性别：</label></td>
<td>
<input type="radio" name="sex" value="male" id="male"/>
<label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"/>
<label for="female">女</label>
</td>
</tr>
<tr>
<td><label for="area">地区：</label></td>
<td>
<select name="area" id="area">
<option value="0">- 请选择 -</option>
<option value="1">锦江区</option>
<option value="2">金牛区</option>
<option value="3">龙泉驿区</option>
<option value="4">青羊区</option>
</select>
</td>
</tr>
<tr>
<td><label for="num">身份证：</label></td>
<td><input type="text" id="num" name="num"/></td>
<td><div id="numTip"></div></td>
</tr>
<tr>
<td><label for="phone">电话号码：</label></td>
<td><input type="text" name="phone" id="phone"/></td>
<td><div id="phoneTip"></div></td>
</tr>
<tr>
<td><label for="email">邮箱：</label></td>
<td><input type="text" name="email" id="email"/></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="提交"/></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script>
$.formValidator.initConfig({ //用于配置当前formValidator插件
formID:"myfm",
debug:false,
submitOnce:true,
validatorGroup : '1', //设置验证组，默认值为1
onSuccess : function(){ //验证成功后的回调函数
},
onError:function(){ //验证失败后的回调函数
}
});
$('#uname').formValidator({
ValidatorGroup : '1', //验证组为1
onEmpty : '用户名不能为空', //提示用户名不能为空
onShow : "",
onFocus : '用户名必须为1到12位的数字或字母',//表单元素获得焦点的时候提示应输入的格式
onCorrect : '用户名输入正确' //输入正确的提示
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{1,12}$', //验证表单输入的正则表达式
onError : '用户名格式有误，请从新输入' //输入错误的提示
})
.ajaxValidator({ //验证输入的用户名是否已经存在
dataType : 'html', //请求数据的格式
async : true, //异步方式
url : 'test.php',
success : function(data){
if (data=='false') {
return false;
}else{
return true;
}
},
onError : '该用户名已存在，请从新输入',
onWait : '正在对用户名进行合法性校验，请稍候...'
});
$('#pwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不能为空',
onShow : "",
onFocus : '密码必须为6位以上的字母或数字',
onCorrect : '密码输入正确'
})
.regexValidator({
regExp : '[0-9a-zA-Z]{6,}',
onError : '密码格式有误，请从新输入'
});
$('#repwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不能为空',
onShow : "",
onFocus : '密码必须为6位以上的字母或数字',
onCorrect : '密码输入正确'
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{6,}$',
onError : '密码格式不正确'
})
.compareValidator({ //比较两次输入内容是否符合下面给出的比较符号
desID : 'pwd', //相比较的表单元素的ID值
operateor : '=', //要比较的两个元素之间的关系
onError : '两次密码输入不一致，请从新输入' //不满足以上关系的时候的提示
});
$('#num').formValidator({
ValidatorGroup : '1',
onEmpty : '身份证不能为空',
onShow : '',
onFocus : '请输入您的身份证号',
onCorrect : '身份证格式正确'
}).regexValidator({
regExp : '^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{4}$',
//15位身份证号码的正则表达式/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
onError : '身份证格式有误，请从新输入'
});
$('#phone').formValidator({
ValidatorGroup : '1',
onEmpty : '手机号码不能为空',
onShow : '',
onFocus : '请输入您的手机号码',
onCorrect : '手机号码格式正确',
})
.regexValidator({
regExp : '^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$',
onError : '手机号码格式有误，请从新输入'
});
$('#email').formValidator({
ValidatorGroup : '1',
onEmpty : '邮箱地址不能为空',
onShow : '',
onFocus : '请输入您的邮箱地址',
onCorrect : '邮箱格式正确'
})
.regexValidator({
regExp : '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$',
onError : '邮箱格式有误，请从新输入'
});
</script>
</body>
</html>
php部分代码：
<?php
header('Content-Type:html');
$name=array('Tom','ervin','Jhon');
$uname=$_REQUEST['uname'];
$notexit='true';
for ($i=0; $i <3 ; $i++) {
if ($uname==$name[$i]) {
$notexit='false';
break;
}else{
}
}
echo "$notexit";
?>

以上内容是小编给大家介绍的jQuery formValidator表单验证相关知识，希望对大家有所帮助，同时感谢大家对我们网站的支持。

jQuery 表单验证插件formValidation实现个性化错误提示

其效果图如下:使用说明需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式使用实例一,包含文件部分复制代码代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&
jQuery表单验证插件formValidator(改进版)

枚举对象的使用: 复制代码代码如下: //各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true; case _validTypeEnum.InputValidator: if (srcT
基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
jQuery formValidator表单验证插件开源了含API帮助、源码、示例

2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态. 这个bug已经修复,请重新下载. 2008/7/17 14:12:00 jQuery formValidator 3.1ver 1.为inputValidator增加empty属性.用于设置控件文本值是否允许两边为空.具体请看demo1里的密码的校验代码. 该属性是个对象,默认值{leftempty:true,rightempty:tr
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)

先上三张效果图: 这些功能在Java Web开发中可能是经常需要的,虽然很简单却使很实用的功能,这里记录下以免忘记. 1. 先说表单提交前验证:后台经常用到(这里是提交后统一验证,及时验证请参考我另一篇文章 http://blog.csdn.net/jianzhonghao/article/details/52503431) 1.1 通过submit 按钮提交后会根据form的属性action="路径"来跳转到相应的路径,这时,给form添加一个 onsubmit =&quo
jquery validate和jquery form 插件组合实现验证表单后AJAX提交

要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件--jquery validate.js 和 jquery form.js.具体详细说明情况下文. 1.jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单的验证,不用我们这些童鞋去现写了,一天天的多累啊,呵呵. 2.jQuery form.js,"这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm 和 ajaxSubmi
jquery表单验证使用插件formValidator

1.首先在项目中添加必备js与css 2.代码中添加引用(必备引用) 复制代码代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo
jQuery formValidator表单验证

作为一名程序员,在解决工作中遇到问题之后,做一些总结是有必要的,既方便总结温习相关知识点,也为广大的程序员提供了一些工作经历,给予同行一面明鉴. html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>formValidator</title> <script src="js/jq
jQuery完成表单验证的实例代码(纯代码)

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css"
jQuery.Validate表单验证插件的使用示例详解

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例示例包含验证错误时,显示红色错误提示自定义验证规则引入中文错误提示重置表单需要执行2句话源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
深入学习jQuery Validate表单验证

本文实例介绍了jQuery Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下 1.添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 2.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 3.详细代码如下: <html> <hea
jQuery Validate表单验证入门学习

本文讲述了jQuery Validate表单验证入门的基础知识,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,以下就是本文的全部内容,特分享给大家. 1.导入 js 库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/j
使用 jQuery 实现表单验证功能

5.1.5 表单验证表单作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信息等,因此它是网站管理者与浏览者之间沟通的桥梁.在表单中,表单验证的作用也是非常重要的,它能使表单更加灵活.美观和丰富. 以一个简单的用户注册为例.首先新建一个表单, HTML 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" c
jquery.validate表单验证插件使用方法解析

为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易.jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下使用方式 1.在控件中使用默认验证规则,例子: 电子邮件(必填) <input id="email" class="required email" value="email@" /> 2.可以在控件中自定义验证规则
基于Jquery实现表单验证

有时在我们注册账户.登陆系统时,当所有验证通过方可提交这就需要Jquery来实现表单验证,今天分享给小伙伴们一段基于Jquery实现表单验证的代码. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Reg</title> <style> .state1{ color
JQuery.validationEngine表单验证插件(推荐)

一.说明 jQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字.整数.最大值.最小值 3.日期类型:日期(yyyy-MM-dd/ yyyy/MM/dd等).日期+时间.最小日期.最大日期.日期时间段 4.业务字段:url.email.phone.ipv4:ciaoca版扩展支持:qq.邮政编码.身份证.汉字. 5.Ajax后台验证:支持全局扩展定义,后台可定

jQuery formValidator表单验证

相关推荐

随机推荐