模拟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么,后来真心的是一点都不想再看 ...
随机推荐
- P4891 序列
P4891 序列 题目描述 给定两个长度为 n 的序列 A 和 B,定义序列 \(C_i=\max\limits_{j=1}^i A_j\) 定义当前的价值是 $\prod\limits_{i=1}^ ...
- Linux记录-Linux 企业运维人员最常用 150 个命令
命令 功能说明 线上查询及帮助命令 (2 个) man 查看命令帮助,命令的词典,更复杂的还有 info,但不常用. help 查看 Linux 内置命令的帮助,比如 cd 命令. 文件和目录操作命令 ...
- Linux系统加固
iptables 初始化 > iptables -F #清空所有的链 > iptables -X #清空所有自定义的链 关掉全部端口 > iptables -P INPUT DROP ...
- 超详细设置Idea类注释模板和方法注释模板
网上找了一下,没有很详细且正确介绍Idea配置注释模板的,于是结合多篇文章自己琢磨整理出如下. 设置类注释模板 1.选择File–>Settings–>Editor–>File an ...
- 由-webkit-transform-style:preserve-3d;所想
看一个用css3写幻灯片的demo用到了这么几个属性 .demo{ -webkit-transform-style:preserve-3d; -webkit-perspective:800px; -w ...
- NPOI 2.3
样例 //设置员工编号单元格为文本格式 循环效率问题? IDataFormat dataformat = workbook.CreateDataFormat(); ICellStyle style1 ...
- 配置Arcengine10.1+java开发环境(Eclipse)
以下开发环境配置是假定用户已经安装了Java开发的IDE(Eclipse) 软件准备 (一)ArcEngine 10.1 安装包 提取码:poa0 (二)ArcGIS License Manager ...
- 淘淘商城之SSM框架整合概要
一.后台系统所用的技术 1)框架:Spring + SpringMVC + Mybatis: 2)前端:EasyUI: 3)数据库:mysql 二.创建数据库 1)安装mysql数据库: 2)在mys ...
- resultMap自定义某个javaBean的封装规则代码
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...
- POJ3635 Full Tank?【Dijkstra+DP】
题意: n个城市之间有m条双向路.每条路要耗费一定的油量.每个城市的油价是固定并且已经给出的.有q个询问,表示从城市s走到e,油箱的容量为c,求最便宜的方案. 思路: 用Dijkstra+Heap即可 ...