模拟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么,后来真心的是一点都不想再看 ...
随机推荐
- scrapy xpath、正则表达式、css选择器
scrapy xpath XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言.XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力. 学习 ...
- 20190312 Windows上Kafka集群
1. 复制config/server.properties为server1.properties和server2.properties 2. 以server1.properties为例,修改配置 br ...
- java compareTo() 用法注意点
转自:http://www.2cto.com/kf/201305/210466.html compareTo就是比较两个值,如果前者大于后者,返回1,等于返回0,小于返回-1,我下面给出了例子,由于比 ...
- Java编程思想 学习笔记10
十.内部类 可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一种非常有用的特性,因为它允许你把一些逻辑相关的类组织在一起,并控制位于内部的类的可视性.然而必须要了解,内部类和组合是 ...
- PHP 将amr音频文件转换为mp3格式
说下整体思路 1.服务器安装ffmpeg 2.使用ffmpeg -i 指令来转换amr为mp3格式(这个到时候写在PHP代码中,使用exec函数执行即可) 3.在网页端使用HTML5的audio标签来 ...
- 二、存储管理器--SDRAM
2.1 硬件结构 2.1.1 硬件框图 CPU 通过存储管理器来读取 SDRAM 网卡 等外部设备,CPU不管外部设备是怎么样的,只是读存储管理器中的地址 CPU从0x30000000地址读取数据. ...
- Java基础编程题——分别统计出其中汉字、英文字母、空格、数字和其它字符的个数
package com.yangzl.basic; import java.util.Scanner; /** * 分别统计出其中汉字.英文字母.空格.数字和其它字符的个数 * @author Adm ...
- luogu P3243 [HNOI2015]菜肴制作
这题一看就知道和拓扑序有关 考虑拓扑排序的时候每次取队列里最小的数进行排序 然后就\(\mathcal{GG}\)了,因为这样只能使字典序最小,而并不能保证题目中要求的每个编号的数要在满足前面数尽量在 ...
- A - 地精部落 （DP）
题目链接:https://cn.vjudge.net/contest/281960#problem/A 题目大意:中文题目. 具体思路:首先,如果有一段是山谷的话,那么这一段中也能用来表示山峰,只要将 ...
- javascript方法--bind()
bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解. 语法 fun.bind(this,arg1,arg2,...) bind()方法会创建一个新的函数 ...