HTML之JS经典验证

最新推荐文章于 2021-06-30 08:19:05 发布

bayern127

最新推荐文章于 2021-06-30 08:19:05 发布

阅读量606

点赞数 2

分类专栏：前端JavaScript 文章标签： html javascript jQuery 库

本文链接：https://blog.csdn.net/bayren820/article/details/50407916

版权

前端JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天我们来聊聊一些前端知识，前端包括了HTML，CSS，JavaScript，我们重点聊聊JS(JavaScript)！

原生js其实对于我们深入理解js这门语言是非常好的，但是工作中我们用的更多的往往是js的框架，用一些封装好

的方法，就可以用极少的代码去实现复杂的功能，提高了工作效率，我今天重点和大家分享jQuery这款框架的经典应用！

下面我给大家讲解一下下面的案例，是关于表单验证的，代码都是会加上注释的，方便大家阅读理解。

<html>

// 设置HTML页面展示编码，防止乱码（HTML基础知识）
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<form action='yanzheng.php' id='user_form' method='post'>
用户名：<input type='text' name='uname'><span class='uname-ok'></span><br/>
密码：<input type='password' name='pwd'><span class='pwd-ok'></span><br/>
确认密码：<input type='password' name='rpwd'><span class='rpwd-ok'></span><br/>
手机号：<input type='text' name='mobile'><span class='mobile-ok'></span><br/>
邮箱：<input type='text' name='email'><span class='email-ok'></span><br/>
<input type='submit' value='注册'>
</form>
</html>

// 这两个js文件非常重要，大家可以根据名字，去百度下载

// 这是JavaScript大神利用原生js代码，封装好的库文件，尤其validate.js是专门用于进行js验证使用的

var rule = {
rules: {
uname:{ // 该名字必须和表单的元素的name一致，否则无法识别
required: true, // 说明是必填字段
isUserName: true, // 需要遵循的js验证规则，即正则验证
},
pwd:{
required: true,
isPassword: true,
},
rpwd:{
required: true,
isPassword: true,
eqPassword: true,
},
mobile:{
required: true,
isMobile: true,
},
email:{
required: true,
isEmail: true,
}
},
messages: {
uname:{
required: '请输入用户名', // 当出现错误的时候的提示信息，这个必须存在
},
pwd:{
required: '请输入密码',
},
rpwd:{
required: '请输入密码',
},
mobile:{
required: '请输入手机号',
},
email:{
required: '请输入邮箱',
}
}
}

// 开启验证，user_form是form表单的ID
$('#user_form').validate(rule);

// 下面的验证就是经典的正则验证，必须引入了validate.js文件才可以使用

// 验证用户名合法性
$.validator.addMethod("isUserName",function(value,element){ // value即表单元素的val值
var lan = /^[\u4e00-\u9fa5a-z0-9]{2,20}$/;
return this.optional(element) || lan.test(value);
},"用户名只能包含汉字、数字、小写字母，且长度为2到20位");

//验证密码合法性
$.validator.addMethod("isPassword",function(value,element){
var password = /^[A-Za-z0-9]{6,20}$/;
return this.optional(element) || password.test(value);
},"请输入6-20位字母或数字的密码");

//验证重复输入密码是否正确
$.validator.addMethod("eqPassword",function(value,element){
var pass_01 = $('input[name=pwd]').val();
return this.optional(element) || (pass_01 === value);
}, "两次输入的密码不相同，请检查");

//验证手机号的合法性
$.validator.addMethod("isMobile",function(value,element){
var password = /^1(3|4|5|7|8)[0-9]{9}$/;
return this.optional(element) || password.test(value);
},"请输入正确格式的11位数字");

//验证邮箱的合法性
$.validator.addMethod("isEmail",function(value,element){
var password = /^[0-9a-zA-Z]+@[0-9a-zA-Z]+\.[a-zA-Z]+$/;
return this.optional(element) || password.test(value);
},"请输入正确的邮箱格式");