本文详细介绍了JQuery和JS在表单验证中的应用，包括JQuery的引入方法、作用及选择器，对比了JQuery与原生JS在表单验证上的优劣，并提供了具体的代码示例。
为什么要使用jquery
JQuery是提供大量的JS的类库，理解为对js的方法、属性、dom操作的封装，需要区分js和jquery的方法。
如何使用jquery
需要引入jquery文件，下面是几个引入jquery的地址：
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
3.0.0版本:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
2.1.4版本:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
jquery有压缩版和解压版，压缩版相对较小，但是功能是一样的
JQuery的作用
- jquery 封装了大量的API ，可以基本替代javascript的原生方法
- jquery 可以操作 样式 ，美化页面
- jquery可以完成页面的dom元素的添加，删除，访问，检索 ，遍历
- jquery可以提供ajax的封装
- jquery UI 提供很多 ui组件。 （用户界面 ）
- jquery 提供大量的事件， 提供一些表单验证的组件
JQuery的加载方式
$(document).ready(function(){
代码块
}
类似于js的加载方法
window.οnlοad=function(){
也可以写jquery代码
}
以上两种写法区别
1、 onload 写法必须等待网页加载完 ，执行包裹语句块 ，ready 只需网页的dom结构加载完，即可执行
2、 onload 只能在页面上 写一次，第二个次会覆盖 ，ready 可以写多次 ，依次按顺序加载
3、onload 没有简写 ready 可以简写
JQuery的选择器
有基本选择器，层级选择器，冒号选择器和属性选择器。
用js怎么验证？
<script type="text/javascript">
function validateUname(obj){
var msg=document.getElementById("msg");
var info="";
var flag=true;
if (obj.value=='') {
info+="用户名不能为空<br/>";
flag=false;
} else{
var regexp= /[0-9a-zA-Z]{8,16}/ ;
if(!regexp.test(obj.value)){
info+="用户名不合法<br/>";
flag=false;
}
}
msg.innerHTML=info;
return flag;
}
function validatePassword(){
var msg = document.getElementById("msg");
var info="";
var flag=true;
var pwd=document.getElementsByName("password")[0].value;
var repwd=document.getElementsByName("repassword")[0].value;
if (pwd=='') {
info+="密码不能为空<br/>";
flag=false;
}else{
if (pwd!=repwd) {
info+="两次密码不一致<br/>";
flag=false;
}
}
msg.innerHTML=info;
return flag;
}
function validateAge(){
var msg= document.getElementById("msg");
var info="";
var flag=true;
var age=document.getElementsByName("age")[0].value;
// alert("age");
if (age=='') {
debugger;
info+="年龄不可以为空<br/>";
flag=false;
}else{
if(age<0||age>100){
info+="年龄不合法<br/>";
flag=false;
}
}
msg.innerHTML=info;
return flag;
}
function validateBir(){
var msg=document.getElementById("msg");
var info="";
var flag=true;
var bir=document.getElementsByName("birthday")[0].value;
if(bir==''){
info+="生日不能为空<br/>";
flag=false;
}
msg.innerHTML=info;
return flag;
}
function validatephone(){
var msg=document.getElementById("msg");
var info="";
var flag=true;
var phone=document.getElementsByName("phone")[0].value;
if(phone==''){
info+="电话不能为空<br/>";
flag=false;
}else{
var regexp = /1[0-9]{10}/;
if(!regexp.test(phone)){
info+="电话号码不合法<br/>";
flag=false;
}
}
msg.innerHTML=info;
return flag;
}
function validata2(){
var username=document.getElementsByName("username")[0];
// 阻止表单提交
var v_flag=true;
//验证用户名
if(!validateUname(username)){
v_flag=false;
}
if(!validatePassword()){
v_flag=false;
}
if(!validateAge()){
v_flag=false;
}
if(!validatephone()){
v_flag=false;
}
if (!validateBir()) {
v_flag=false;
}
//document.getElementById("msg").innerHTML=msg2;
return v_flag;
}
</script>
</head>
<body>
<div>
<span id="msg">
</span>
<form action="index.html" method="get" onsubmit="return validata2()">
<h2>用户信息录入</h2>
用户名：<input type="text" name="username" onblur="validateUname(this)"/><br />
密码：<input type="text" name="password" onblur="validatePassword()"/><br />
确认密码：<input type="text" name="repassword"/><br />
年龄：<input type="text" name="age" onblur="validateAge()"/><br />
生日：<input type="text" name="birthday" onblur="validateBir()"/><br />
手机号码：<input type="text" name="phone" onblur="validatephone()"/><br />
<button>录入</button>
</form>
</div>
</body>
如果不用jquery去验证，js代码的量会很大。
JQuery验证表单
首先导入jquery，再导入Jquery Validate提供了一套有用的表单验证规则，接着是支持中文的语言包。
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="js/messages_zh.js" ></script>
验证表单的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery表单验证</title>
<style type="text/css">
/* div{
margin-top: 50px;
/* text-align: center;
}
form{
margin-top: 20px;
margin-bottom: 20px;
}
span{
} */
.error{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<!-- <div class="div" align="center" style="border: 1px solid red;"> -->
<form id="myform" action="index.html" method="get">
<span>姓 氏：</span><input type="text" name="firstname" value="" /><br>
<span>名 字：</span><input type="text" name="lastname" value="" /><br>
<span>密 码：</span><input type="password" name="password" value="" /><br>
<span>确认密码：</span><input type="password" id="repassword" value="" /><br>
<span>邮 箱：</span><input type="text" name="email" value="" /><br>
<span>手机号码：</span><input type="text" name="phone" value="" /><br>
<button>提交</button> <button type="reset">重置</button>
</body>
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="js/messages_zh.js" ></script>
<script type="text/javascript">
$(function(){
$("#myform").validate({
rules:{
firstname:"required", // 对name=firstname的文本框 增加 必填校验
lastname:{
required:true,
minlength:2
},
password:"required",
repassword:{
required:true,
equalTo:"#password" // 与 id=password的input框 必须一致
},
email:"required"
},
messages:{
firstname:"请输入您的姓氏",
lastname:{
required:"名字必填",
minlength:"最小2个长度"
},
password:"密码必填",
repassword:{
required:"确认密码必填",
equalTo:"两次密码必须一致" // 与 id=password的input框 必须一致
},
email:"亲，邮箱必填哦"
}
});
});
</script>
</html>
其实$("#myform").validate(）里面是jeson格式。
注意
rules里面的属性名是HTML标签的name 属性，不是id属性，不要搞错！（如firstname lastname）.
今天改错了检查了半天。哈哈。。。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
