模拟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么,后来真心的是一点都不想再看 ...
随机推荐
- Hadoop生态圈-Cloudera Manager扫盲篇
Hadoop生态圈-Cloudera Manager扫盲篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在讨论CDH.cloueramamager之前,我要问大家几个问题: 1& ...
- CodeForces - 516B Drazil and Tiles（bfs）
https://vjudge.net/problem/CodeForces-516B 题意 在一个n*m图中放1*2或者2*1的长方形,问是否存在唯一的方法填满图中的‘.’ 分析 如果要有唯一的方案, ...
- iOS safari 苹果手机如何阻止页面弹性“橡皮筋效果”？
苹果上这个上下弹的效果对于有固定导航的页面,体验很不好 知乎上搜到一个并不是完美方案:https://www.zhihu.com/question/22256539 完美方案是有个国外插件叫:prev ...
- 重定向printf
#include "stdio.h" #ifdef __GNUC__#define PUTCHAR_PROTOTYPE int __io_putchar(int ch)#else# ...
- QA系统Match-LSTM代码研读
QA系统Match-LSTM代码研读 背景 在QA模型中,Match-LSTM是较早提出的,使用Prt-Net边界模型.本文是对阅读其实现代码的总结.主要思路是对照着论文和代码,对论文中模型的关键结构 ...
- 我的Mac中毒了，病毒居然叫做MacPerformance
禁用 ReportCrash 直接干掉进程肯定不管用,从名字就知道这个进程会自动被触发,除非修改系统配置. Google 了一下,发现很简单,在 terminal 里执行 launchctl unlo ...
- oracle数据库还原以及备份 包括快速备份（并发压缩）
expdp jhpt/XXXX directory=databackup dumpfile=dpfile_201512091300_%U.dmp filesize=5G parallel=8 comp ...
- luogu P3576 [POI2014]MRO-Ant colony
传送门 一群蚂蚁能被吃,也就是走到指定边的两端点之一要走到另一端点时有\(k\)只,我们可以从这两端点逆推,记两个值为走到某个点时最后会被吃掉\(k\)只蚂蚁的蚂蚁数量范围,式子下面有,很好理解(雾) ...
- php 设置中文 cookie, js获取
参考链接:http://www.nowamagic.net/librarys/veda/detail/1271 http://www.ruanyifeng.com/blog/2008/06/base6 ...
- Android的网络通信机制
1. Socket接口 不常用 2.HttpURLConnection接口 3. HttpClient接口 http://blog.csdn.net/ccc20134/article/details/ ...