表单验证
一、
<!--
表单校验：
【前段表单校验【人性化】/后端也要做表单校验】
1.表单：表单就是能够提供给客户输入内容的东西。输入框，下拉框。单选按钮，多选按钮
复选框文本域
2.前段的表单验证：为什么不是直接前段直接发送数据给后端？
无可厚非{实现表单验证的步骤
①绑定合适的事件（需要客户在执行某个动作的时候去进行校验）
②获取表单的内容
③根据表单的内容和实际的需求进行合理的提示信息
3. 我们经常使用的函数String函数
会使用正则表达式进行表单验证，
验证分为简单验证和符合验证
符合模式/\d{9}/;表示在0-9之间的数字，必须出现九次
元字符：/xxx/表示正则语法
^表示 一什么进行开头
$表示以什么结束
\s空字符串
\S非空字符串
\d一个数字等同于[0-9]
\D非数字等同于[^0-9]
\w一个数字，字母，下划线[a-zA-Z0-9_]
\W非上述情况
.表示匹配任意字符
限定符号有：
{n} 匹配n次
{n，}匹配n次或者多次
{n,m}至少匹配n次不能超过m次
?匹配0次或者1次
|匹配俩个正则中的其中一种
三种属性修饰符：
g:进行全局匹配
i:忽略大小写
m:匹配多行{必须匹配g进行使用}
会使用H5的验证API进行表单验证
H5的标签的新属性：
required:必填字端
placeholder:提示性的文字
pattern:正则表达式
H5:新的验证JS API(用途不是很广泛)
常见的前段插件/前段库/前段库
validate
bootstrap
validator
highcharts
echarts
zTree
bootstrap
二、表单验证的基本元素操作和正则表达式和常见插件介绍
1.基本的表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post" ">
密码：<input type="text" value="" name="password"/>
<input type="submit" value="提交表单 "/>
</form>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* 普通提交首
* 1.绑定事件
* 2.获取内容
* 3.根据内容进行实际的判断
*
*/
//利用属性选择器获取标签对象
var $input = $("input[name=password]");
//然后给对象进行绑定失去焦点事件
$input.blur(chekUsername);
/**
* 用户名的校验
*/
function chekUsername(){
//通过标签对象获取标签内容
var $username = $input.val();
//alert($username);
//根据需求进行判断
/**
* 内容不能为空
* 长度不能小于6
*/
if($username.trim()==""){
alert("用户名不能为空");
//结果是不正确的时候就要返回false。否则就会在错误的情况下还发生页面的跳转
return false;
}else if($username.length<6){
alert("用户名长度不能小于6");
return false;
}
return true;
}
/**
* 进行表单校验
*/
//给表单添加提交事件
$("form").submit(function(){
//当表单提交的时候，验证表单的所有内容是否是合格
//方式一就是将你的表单验证都能添加返回值
//当一个方法作为判断条件的时候，记得加上（）
if(!chekUsername()){
return false;
}
return true;
});
</script>
</body>
</html>
2.表单验证和邮箱验证
①
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<p>
密码：<input type="password" name="password" /><input type="button" size="3" value="点" />
</p>
<p>
确认密码：<input type="password" id="repassword" />
</p>
<p>
邮箱：<input type="text" name="email" />
</p>
<input type="submit" value="注册"/>
</form>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取对象，邮箱的，点击的，密码的，校验密码的，
var emailObj = $("input[name=email]");
var passwordObj = $("input[name=password]");
var btnObj = $("input[type=button]");
var repasswordObj = $("#repassword");
/**
* 点击密码后的按钮实现密码明文显示
*/
btnObj.click(function(){
var pwdtype = passwordObj.attr("type");
//alert(pwdtype);
if(pwdtype == "password"){
passwordObj.attr("type","text");
}else{
passwordObsj.attr("type","password");
}
});
/**
*
* 提交表单
*方法绑定的时候不加括号，方法调用的时候的记得加括号
*/
$("form").submit(function(){
if(checkPwd() && checkRePwd() && checkEamil()){
return true;
}
return false;
});
//开始给对象绑定失去焦点事件
passwordObj.blur(checkPwd);
repasswordObj.blur(checkRePwd);
emailObj.blur(checkEamil);
/**
* 检查邮箱的方法
*/
function checkEamil(){
//获取邮箱的输入值
var emailVal = emailObj.val();
//对输入的值进行各种判断
if(emailVal.trim() ==""){
alert("邮箱不能为空");
return false;
}else if(emailVal.indexOf("@")==-1 || emailVal.indexOf(".")<-1){
alert("邮箱格式不正确");
return false;
}
return true;
}
/**
* 检查密码
*/
function checkPwd(){
//获取密码的输入框中的值
var passwordVal = passwordObj.val();
//开始密码值的判断
if(passwordVal.trim()==""){
alert("密码不能为空");
return false;
}else if(passwordVal.length<6 || passwordVal>12){
alert("密码长队必须在6-12之间");
return false;
}
//开始获取密码字符串中的字符，判断是否是字符串
//isna() is not a number
//对每一个字符串进行判断，看看是否是数字，是数字，说明密码格式正确，否则错误
var flag = false;
for(var i=0;i<passwordVal.length;i++){
//通过通过字符串中的位置，来得到对应的字符
var charStr = passwordVal.charAt(i);
if(!isNaN(charStr)){//是数字的情况
flag=true;
}
}
if(!flag){
alert("对不起密码中必须包含数字");
}
return flag;
}
/**
* 检查确定密码
*/
function checkRePwd(){
var passwordVal = passwordObj.val();
var repasswordVal = repasswordObj.val();
if(passwordVal!=repasswordVal){
alert("俩次密码输入不同！");
return false;
}
}
</script>
</body>
</html>
---------------------------------------------------------------------
②
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var name = "1";
alert(isNaN(name));
</script>
</body>
</html>
3.多种形式的验证提示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<p>
密码：<input type="password" name="password" /><input type="button" size="3" value="点" />
<span id="pwdTip"></span>
</p>
<p>
确认密码：<input type="password" id="repassword" />
<span id="repwdTip"></span>
</p>
<p>
邮箱：<input type="text" name="email" />
<span id = "emailTip"></span>
</p>
<input type="submit" value="注册"/>
</form>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取对象，邮箱的，点击的，密码的，校验密码的，
var emailObj = $("input[name=email]");
var passwordObj = $("input[name=password]");
var btnObj = $("input[type=button]");
var repasswordObj = $("#repassword");
/**
*
* 提交表单
*方法绑定的时候不加括号，方法调用的时候的记得加括号
*/
$("form").submit(function(){
if(checkPwd() && checkRePwd() && checkEamil()){
return true;
}
return false;
});
//开始给对象绑定失去焦点事件
passwordObj.blur(checkPwd);
repasswordObj.blur(checkRePwd);
emailObj.blur(checkEamil);
/**
* 检查邮箱的方法
*/
function checkEamil(){
$("emailTip").html("");
//获取邮箱的输入值
var emailVal = emailObj.val();
//对输入的值进行各种判断
if(emailVal.trim() ==""){
//alert("邮箱不能为空");
$("#emailTip").html("<font color='red'>邮箱不能为空</font>");
return false;
}else if(emailVal.indexOf("@")==-1 || emailVal.indexOf(".")<-1){
//alert("邮箱格式不正确");
$("#emailTip").html("<font color='red'>邮箱不能为空</font>");
return false;
}
return true;
}
/**
* 检查密码
*/
function checkPwd(){
$("#pwdTip").html("");
//获取密码的输入框中的值
var passwordVal = passwordObj.val();
//开始密码值的判断
if(passwordVal.trim()==""){
//alert("密码不能为空");
$("#pwdTip").html("<font color='red'>密码不能为空</font>");
return false;
}else if(passwordVal.length<6 || passwordVal>12){
//alert("密码长队必须在6-12之间");
$("#pwdTip").html("<font color='red'>密码长队必须在6-12之间</font>");
return false;
}
//开始获取密码字符串中的字符，判断是否是字符串
//isna() is not a number
//对每一个字符串进行判断，看看是否是数字，是数字，说明密码格式正确，否则错误
var flag = false;
for(var i=0;i<passwordVal.length;i++){
//通过通过字符串中的位置，来得到对应的字符
var charStr = passwordVal.charAt(i);
if(!isNaN(charStr)){//是数字的情况
flag=true;
}
}
if(!flag){
//alert("对不起密码中必须包含数字");
$("#pwdTip").html("<font color='red'>对不起密码中必须包含数字</font>");
}
return flag;
}
/**
* 检查确定密码
*/
function checkRePwd(){
$("repwdTip").html("");
//获取内容
$("#emailTip")
var passwordVal = passwordObj.val();
var repasswordVal = repasswordObj.val();
if(passwordVal!=repasswordVal){
//alert("俩次密码输入不同！");
$("repwdTip").html("<font color='red'>俩次密码输入不同</font>")
return false;
}
}
/**
* 点击密码后的按钮实现密码明文显示
*/
btnObj.click(function(){
var pwdtype = passwordObj.attr("type");
//alert(pwdtype);
if(pwdtype == "password"){
passwordObj.attr("type","text");
}else{
passwordObj.attr("type","password");
}
});
</script>
</body>
</html>
4.正则的初始化使用
①
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//[推荐]
var reg1 = /^1\w{6}$/;
var str = "1ccc564";
//alert(reg1.test(str));
//test()检查字符串中指定的值，如果有就返回true
//exec()检索字符串中是正则的子字符串，如果有就返回true,没有就返回false；
alert(reg1.exec(str));
</script>
</body>
</html>
------------------------------------------------------------------------------------
②
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var str = "HelloWorld";
var reg1 = /w/i;//简单模式
alert(reg1.test(str));
//以前觉得这是将小o换成了O实际上是通过正则进行更换的
var newStr = str.replace(/o/g,"O");
alert(newStr);
</script>
</body>
</html>
5.H5标签的新属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<p>
密码：<input type="password" id="pwd" name="password" required placeholder="密码由6-12位组成"/>
<span id="pwdTip"></span>
</p>
<p>
确认密码：<input type="password" id="repassword" />
<span id="repwdTip"></span>
</p>
<p>
<!-- 填写正则 -->
邮箱：<input type="text" name="email" id="email" required pattern="[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?"/>
<span id="emailTip"></span>
</p>
<input type="submit" value="注册" id="sub"/>
</form>
<script type="text/javascript">
//获取元素对象
var pwdObj = document.getElementById("pwd");
var emailObj = document.getElementById("email");
//提交元素对象
var submitObj = document.getElementById("sub");
//通过元素对象获取validity对象
var pwdValidity = pwdObj.validity;
var emailValidity = emailObj.validity;
//给提交元素对象绑定一个点击事件
submitObj.onclick = function(){
//判断密码，密码是必填项，不填就会给出对应的提示内容
//通过validity的方法；来进行判断值是否为空
if(pwdValidity.valueMissing==true){
//通过元素对象来设置错误时候的信息
pwdObj.setCustomValidity("密码不能为空");
}else{
//将输入框设置为空
pwdObj.setCustomValidity("");
}
}
//判断邮箱
if(emailValidity.valueMissing==true){
emailObj.setCustomValidity("邮箱不能为空");
}else if(emailValidity.patternMismatch){
emailObj.setCustomValidity("邮箱格式不正确");
}else{
emailObj.setCustomValidity("");
}
</script>
</body>
</html>
6.常用的jQuery插件
①validaty插件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="formId" action="" method="post">
<input type="text" name="user" id="" value="" /><br />
<input type="password" name="password" id="" value="" /><br />
<input type="submit" value="提交" />
</form>
<!--导入库-->
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages_zh.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#formId").validate({
// 规则
rules:{
// 表单元素的name值
user:{
required:true,
minlength:2,
maxlength:5
},
password:{
required:true,
number:true
}
},
// 提示信息
messages:{
user:{
required:"用户名不能为空",
minlength:"长度最小为2",
maxlength:"长度最大为5"
}
}
});
</script>
</body>
</html>
------------------------------------------------------------------------
②highcharts是js插件
<body>
<div id="container">
</div>
<!--<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>-->
<script src="highcharts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var chart = Highcharts.chart('container', {
title: {
text: '某个'
},
subtitle: {
text: '数据来源：某一个公报私'
},
yAxis: {
title: {
text: '就业人数'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2016
}
},
series: [{
name: '安装，实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</body>
----------------------------------------------------------------------------------------
③h5的css插件引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap-classic.css"/>
</head>
<body>
<input type="button" name="" id="" value="登录" class="btn btn-large btn-success"/>
<img src="images/tou01.jpg" class="img-circle"/>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
