JS页面校验
结构：
1.导入正则表达式校验包：https://blog.csdn.net/weixin_44718300/article/details/88726653
2.页面校验.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
/*
1. 确定事件 : onfocus
2. 事件要驱动函数
3. 函数要干一些事情: 修改span的内容
*/
function showTips(spanID,msg){
//首先要获得要操作元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校验用户名:
1.事件: onblur 失去焦点
2.函数: checkUsername()
3.函数去显示校验结果
*/
function checkUsername(){
//获取用户输入的内容
var uValue = document.getElementById("username").value;
//对输入的内容进行校验
//获得要显示结果的span
var span = document.getElementById("span_username");
if(uValue.length < 6){
//显示校验结果
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
/*
密码校验
*/
function checkPassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
//对密码输入进行校验
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
return true;
}
}
/*
确认密码校验
* */
function checkRePassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
//获取确认密码输入
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
//对密码输入进行校验
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}
/*
校验邮箱
* */
function checkMail(){
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);
var span = document.getElementById("span_email");
//对邮箱输入进行校验
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
return false;
}
}
function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
</script>
</head>
<body>
<form action="www.baidu.com" οnsubmit="return checkForm()" >
用户名:<input type="text" id="username" οnfοcus="showTips('span_username','用户名长度不能小于6')" οnblur="checkUsername()" οnkeyup="checkUsername()" /><span id="span_username"></span><br />
密码:<input type="password" id="password" οnfοcus="showTips('span_password','密码长度不能小于6')" οnblur="checkPassword()" οnkeyup="checkPassword()"/><span id="span_password"></span><br />
确认密码:<input type="password" id="repassword" οnfοcus="showTips('span_repassword','两次密码必须一致')" οnblur="checkRePassword()" οnkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
邮箱:<input type="text" id="email" οnfοcus="showTips('span_email','邮箱格式必须正确')" οnblur="checkMail()" /><span id="span_email"></span><br />
手机号:<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
JS页面校验的更多相关文章
- js页面跳转整理
js页面跳转整理 js方式的页面跳转1.window.location.href方式 <script language="javascript" type=" ...
- js获取当前时间&js 页面时钟
js获取当前时间 //获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = ...
- js页面跳转参考代码大全
整理一下JS页面跳转参考代码 第一种: <script language=/"javascript/" type=/"text/javascript/&qu ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- js页面传参数时，参数值包含特殊字符的处理
js页面传参数时,参数值包含特殊字符应该怎么处理,解决方法就是利用js的escape函数,这个函数在解决中文乱码等方面应用的比较广泛.推荐使用. 工作中遇到的小问题,一个页面中通过window.sho ...
- js页面跳转 和 js打开新窗口 方法
js页面跳转 和 js打开新窗口 方法 第一种: 第二种: 第三种: 第四种: 第五种: 1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面" ...
- 常用的JS页面跳转代码调用大全
一.常规的JS页面跳转代码 1.在原来的窗体中直接跳转用 <script type="text/javascript"> window.location.href=&q ...
- JS页面延迟执行一些方法(整理)
一般在JS页面延迟执行一些方法.可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中que ...
- JS常用校验方法（判断输入框是否为空，数字，电话，邮件，四舍五入等）
JS常用校验方法: 1.判断输入框是否为空,为空时弹出提示框 2.关闭窗口 3.检查输入字符串是否为数字 4.强制把大写转换成小写 5.手机号码校验,长度为11位数字. 6.电子邮件校验 7.电话号码 ...
随机推荐
- java web开发缓存方案，ehcache和redis哪个更好
Ehcache在java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS中取出来的高花费.高延迟采取的一种缓存方案.正因为Ehcache具有健壮性(基于java开发).被认证(具有apac ...
- 【Luogu4448】 [AHOI2018初中组]球球的排列
题意 有 \(n\) 个球球,每个球球有一个属性值 .一个合法的排列满足不存在相邻两个球球的属性值乘积是完全平方数.求合法的排列数量对 \(10^9+7\) 取膜. \(n\le 300\) (本题数 ...
- what to do in next ten years
除了深造编程功力,还要有: 烹饪(川菜湘菜,药膳) 吉他 摄影 四书五经,诗词经典 毛笔字书法 可报班,可搜教程自学
- Jmeter - Linux 下面执行jmeter-server的时候出现：An error occurred: Cannot start. localhost is a loopback address.错误
Jmeter - Linux 下面执行jmeter-server的时候出现:An error occurred: Cannot start. localhost is a loopback addre ...
- 使用FFmpeg处理视频文件：视频转码、剪切、合并、播放速调整
安装 略. 转码 最简单命令如下: ffmpeg -i out.ogv -vcodec h264 out.mp4ffmpeg -i out.ogv -vcodec mpeg4 out.mp4ffmpe ...
- 51nod 1009：数字1的数量
1009 数字1的数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个 ...
- elasticsearch kibana logstash(ELK)的安装集成应用
官网关于kibana的学习指导网址是:https://www.elastic.co/guide/en/kibana/current/index.html Kibana是一个开源的分析和可视化平台,设计 ...
- C++连接sqlite数据库的坑
新的第一次用vs2013搞 C++连接sqlite数据库,遇到了很多问题,我也不搞不懂~~~下面写点小体会 首先: 你要先配置好sqlite的环境 参考链接: https://blog.csdn.ne ...
- java正则表达式校验密码必须是包含大小写字母、数字、特殊符号的8位以上组合
一.需求:密码必须是包含大写字母.小写字母.数字.特殊符号(不是字母,数字,下划线,汉字的字符)的8位以上组合 二.方案:利用正则表达式来校验 三.思路:排除法 1.排除大写字母.小写字母.数字.特殊 ...
- edge浏览器两个标签页localStorage不同步，解决办法
今天遇到个奇怪的问题,edge两个标签页之间的localStorage值不同步,网上说ie和edge如果想让localStorage值同步,需要主动出发localStorage的change事件 wi ...