模拟js中注册表单验证
示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册表单验证</title>
<style>
#div1 {
margin: 50px auto;
width: 250px;
height: 300px;
background: cyan;
text-align: center;
padding: 50px;
}
#div1 input {
width: 250px;
height: 30px;
margin: 20px 0;
text-indent: 10px;
} #div1 span {
color: red;
} </style>
<script>
window.onload = function(){
var oUsername = document.getElementById('username');//获得文档节点
var oUsernameSpan = document.getElementById('username_span');//获得文档节点
oUsername.onblur = function(){
var oValue = oUsername.value.replace(/ /g, '');
oUsername.value = oValue;
if(!oValue){
oUsernameSpan.innerHTML = '用户名不能为空';
}else if(oValue.length < 6 || oValue.length > 18){
oUsernameSpan.innerHTML = '长度应为6~18个字符';
}else if(oValue[0] >= '0' && oValue[0] <= '9'){
oUsernameSpan.innerHTML = '邮件地址必需以英文字母开头';
}else if(!(isAbc(oValue))){
oUsernameSpan.innerHTML = '邮件地址需由字母、数字或下划线组成';
}else{
oUsernameSpan.innerHTML = '输入正确';
} }
} //判断字符串是否都是字母数字下划线组成,
function isAbc(str){
var res = true;
for(var i = 0; i < str.length; i++){
if(!(str[i] >= '0' && str[i] <= '9' || str[i] >= 'a' && str[i] <= 'z' ||str[i] >= 'A' && str[i] <= 'Z' || str[i] =='_')){
res = false;
}
}
return res;
} </script> </head>
<body>
<div id="div1">
<input type="text" id="username" placeholder="请输入用户名"><br>
<span id="username_span">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
<input type="text" id="password" placeholder="请输入密码">
</div>
</body>
</html>
效果：
示例2（小变动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{width: 300px; height: 300px; border: 1px solid black; background-color: cyan; padding: 50px; text-align: center; margin: 100px auto;}
#div1 input{width: 298px; height: 30px; font-size: 18px;margin-bottom: 10px; margin-top: 20px}
#div1 span{color: red} </style>
<script>
window.onload = function(){
var oUsername = document.getElementById('username');
var oUsernameSpan = document.getElementById("username_span"); //失去焦点的时候判断
oUsername.onblur = function(){
//1、如果我们在输入的时候，不小心输入了空格，将空格祛除掉
var oValue = oUsername.value.replace(/ /ig, "");
oUsername.value = oValue; //2、如何对用户名进行验证
if(!oValue){
oUsernameSpan.innerHTML = '用户名不能为空';
}else if(oValue.length > 18 || oValue.length < 6){
oUsernameSpan.innerHTML = "长度应为6~18个字符";
}else if(oValue[0] >= "0" && oValue[0] <= "9"){
oUsernameSpan.innerHTML = "邮件地址必需以英文字母开头";
}else{
//判断每一个字符都符合要求
var isYes = true; //假设用户名是正确的
for(var i = 0; i < oValue.length; i++){
if(!isABC(oValue[i])){
isYes = false;
break;
}
}
if(isYes){
oUsernameSpan.innerHTML = "输入正确✅";
}else{
oUsernameSpan.innerHTML = '邮件地址需由字母、数字或下划线组成';
}
}
}
} //判断一个字符是否是数字、字母、下划线
function isABC(charStr){
if(charStr >= "A" && charStr <= "Z" || charStr >= "a" && charStr <= "z" || charStr >= "0" && charStr <= "9" || charStr == "_"){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<div id = 'div1'>
<input type="text" placeholder="请输入用户名" id = 'username'><br/>
<span id = 'username_span'>6~18个字符，可使用字母、数字、下划线，需以字母开头</span><br/>
<input type="password" placeholder="请输入密码">
</div>
</body>
</html>
效果同上。
模拟js中注册表单验证的更多相关文章
- JS中的表单验证+正则表达式
表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...
- JS判定注册表单的几个方式 及 Ajax进行用户名存在判定
最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区". 有个表单,简单点. <!DOCTYPE html> <!-- 注册表单验证,用户名格式 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- angular中的表单验证
angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...
- js/jquery/插件表单验证
媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- 2018.7.6 js实现点击事件---点击小图出现大图---时间定时器----注册表单验证
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 4.前端注册表单验证 && 表单回填
表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...
- js函数、表单验证
惊天bug!!!在script里面只要有一点点错误,就都不执行了!!!所以每写一个方法,就跑一下,因为这个书写疏忽导致的bug不可估量!!! [笑哭,所以我才这么讨厌js么,后来真心的是一点都不想再看 ...
随机推荐
- postgresql 常用速查
中文资料 中文资料 /**gp中的基本sql语法**/ --删除表 drop table testtb; --创建表 CREATE TABLE testtb ( id integer, "n ...
- Ribbon实现Office开始菜单
Ribbon实现Office开始菜单 界面效果: 首先:在主窗体上拖入popupMenu控件和imageCollection控件 然后选中popupMenu点击三角,再点击Run Designer在弹 ...
- [C++]求解三元一次方程组
/** * author:johnny zen * date:2017-09-20 11:19 * function:Calculate Ternary system of equations * n ...
- Git查看单个文件修改历史
1 命令 git log --pretty=oneline 文件名 ➜ admin git:(feature/v1.5.0_20181202_group) git log --pretty=onel ...
- python初步学习-import和datetime模块
模块 一个完整大型的python程序是由模块和包的形式组织起来的,可见模块在python中的重要性.模块是一种组织型式,它许多有关联(关系)的代码组织放到单独的独立文件中.简单的说,可以把模块理解为一 ...
- PXC中的GTIDs
基本环境:PXC 5.7.19 Row+Gtid,3节点 一.Galera GTID vs MySQL GTID 1.1.Galera GTID vs MySQL GTID Both kinds of ...
- 数据库操作之整合Mybaties和事务讲解 5节课
1.SpringBoot2.x持久化数据方式介绍 简介:介绍近几年常用的访问数据库的方式和优缺点 1.原始java访问数据库 开发流程麻烦 ...
- Mybatis入门学习笔记
1.定义别名 在sqlMapConfig.xml中,编写如下代码: <!-- 定义别名 --> <typeAliases> <!-- type: 需要映射的类型 alia ...
- 2017-2018-2 20155303『网络对抗技术』Exp9：Web安全基础
2017-2018-2 『网络对抗技术』Exp9:Web安全基础 --------CONTENTS-------- 一.基础问题回答 1.SQL注入攻击原理,如何防御? 2.XSS攻击的原理,如何防御 ...
- Linux时间日期类指令
⒈date [Options] 显示/设置当前日期 基本语法: date 显示当前时间 date +"%Y" 显示当前年份 date +"%m" 显示当前月份 ...