原生js的表单验证
最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪。
这是一个原生js编写的简单的表单验证:
<!DOCTYPE html>
<html>
<head>
<script>
function a(){
var b=document.getElementById('xxx1').value;
var c=document.getElementById('xxx2').value;
if(b!=c){
if(document.getElementById('99')!=null){//如果是第二次从id='xxx3'的input输入框中移开焦点,已添加过<p>标签,则不再添加新的<p>标签
return;
}
else{
var addp=document.createElement('p');
addp.id='99';
addp.setAttribute('style','color:red;font-size:12px;margin:5px 0px 10px 0px;');
var addptxt=document.createTextNode('两次密码输入不一致!');
addp.appendChild(addptxt);
document.getElementById('24').insertBefore(addp,document.getElementById('xxx3'));//在id='xxx3'的input输入框之前插入一个<p>标签,显示提示信息。
document.getElementById("xxx2").style.marginBottom="0px";
}
}
if(b==c){
var u=document.getElementById('99');
u.parentNode.removeChild(u);//密码修改到一致后,移除提示信息的<p>标签
document.getElementById("xxx2").style.marginBottom="10px";
}
}
</script>
</head>
<body>
<div id="24">
<input id='xxx1' style="width:100%;margin-bottom:10px;" type="password" name="xxx1" placeholder="请输入密码"/>
<input id='xxx2' style="width:100%;margin-bottom:10px;" type="password" name="xxx2" placeholder="确认密码" onblur="a()" />
<input id='xxx3' style="width:100%;margin-bottom:10px;" type="text" name="xxx3" placeholder="请输入邮箱" />
</div>
</body>
</html>
最新文章
- 单点登录改进版-使用ajax分发cookie避免重定向轮询
- go语言环境搭建+sublime text3(windows环境下)
- MySQL报错“1366 - Incorrect integer value: &#39;&#39; XXXXXXX&#39; at row 1 ”
- 未能找到类型或命名空间名称“Coco”(是否缺少 using 指令或程序集引用)
- Token的管理
- short-path problem (Floyd) 分类: ACM TYPE 2014-09-01 23:58 100人阅读 评论(0) 收藏
- angularjs于directive声明scope说明何时以及如何使用对象修饰符
- [Flask]学习杂记一 Hello程序
- Java操作ini文件 ,解决properties文件中无法读取换行及空格
- [20190402]对比_mutex_wait_scheme不同模式cpu消耗.txt
- [UE4]Spline使用注意事项
- 利用vi编辑器创建和编辑正文文件(一)
- html 刷新重载方法汇总
- zookeeper Error contacting service 解决
- EditPlus配置Java
- php-url地址加密
- Session的方法getSession() 与 getSession(boolean para)区别
- 【Alpha】特殊情况通知
- 优先队列之二叉堆与d-堆
- PHP程序员的技术成长规划 第三阶段:高级阶段
热门文章
- 【vue store的使用方法】(this.$store.state this.$store.getters this.$store.dispatch this.$store.commit)
- (转载)Docker的boot2docker.iso镜像使用
- 【转自】自定义InputFormat、OutputFormat
- codeforces A. Zoning Restrictions Again
- rabbitmq 命令行与控制台
- 计算几何-UVa10652
- kotori和bangdream
- P2P头部平台退出后,普通人如何避开投资理财的“雷区”?
- SQLSTATE[HY000]: General error: 1267 Illegal mix of collations (utf8_general_ci,IMPLICIT) and (gb2312_chinese_ci,COERCIBLE) for operation &#39;=&#39;
- CI 框架多表关联查询