模拟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么,后来真心的是一点都不想再看 ...
随机推荐
- P1169 [ZJOI2007]棋盘制作 && 悬线法
P1169 [ZJOI2007]棋盘制作 给出一个 \(N * M\) 的 \(01\) 矩阵, 求最大的正方形和最大的矩形交错子矩阵 \(n , m \leq 2000\) 悬线法 悬线法可以求出给 ...
- js 数组与字符串的相互转化
数组转字符串:join() 字符串转数组:split('')
- javascript 获取节点元素的封装
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- KDevelop使用经验
KDevelop中不显示行号: 1.上方菜单栏"编辑器"->查看->Show Line Numbers 2.设置->配置编辑器->Appearance-&g ...
- Linux命令（九）查找文件find
4. find -type f 文件 d 目录 l 连接 5. find -size 6. find -maxdepth -2 (最深路径为2) 7. find ./ -maxdepth 1 ...
- ;(function ($, undefined){ })(jQuery); 的使用及说明
对于很多初学者来说很难明白这表示什么,下边我将为大家介绍其相应的作用. 1.代码最前面的分号,可以防止多个文件压缩合并以为其他文件最后一行语句没加分号,而引起合并后的语法错误. 2.匿名函数(func ...
- 使用PLC作为payload/shellcode分发系统
这个周末,我一直在鼓捣Modbus,并利用汇编语言开发了一个stager,它可以从PLC的保持寄存器中下载payload.由于有大量的PLC都暴露在互联网上,我情不自禁地想到,是否可以利用它们提供的处 ...
- Tukey‘s test方法 异常值
如何计算异常值 异常值就是和其他样本数据有显著差异的值.这个词在统计学中经常用到,可以表示数据异常或测量错误.明白算异常值的方法,对于正确理解数据非常有用,而且会引出更精确的结论.以下介绍一个很简单的 ...
- slice() 和splice()
splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改. 1, splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. splice ...
- 错误RSA host key for [ip address] has changed and you have requested strict checking.
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOTE HOST IDENTIFICATION HAS ...