最近在学原生的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>

原生js的表单验证的更多相关文章

  1. 原生JS写表单验证提交功能

    先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...

  2. 原生js制作表单验证，基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  3. ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  4. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  5. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  6. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  7. 2016/05/13 thinkphp 3.2.2 ① 数据删除及执行原生sql语句 ②表单验证

    [数据删除及执行原生sql语句] delete()  返回受影响的记录条数 $goods -> delete(30);   删除主键值等于30的记录信息 $goods -> delete( ...

  8. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  9. js——form表单验证

    用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...

随机推荐

  1. 【C语言】复合函数求值

    例子:求复合函数F(G(X)),其中F(x)=|x-3|+|x+1|,函数G(x)=x^2-3x. 分析:从复合函数的结构可以看出,F函数的自变量为G函数的绝对值,可以将F函数和G函数作为独立的函数实 ...

  2. 苹果公司以注重客户隐私闻名世界，但为什么Siri泄露了我的秘密？

    编辑 | 于斌 出品 | 于见(mpyujian) 苹果的Siri因为其作为智能语音助手,方便人们打电话.发信息等功能,被人们所喜爱,但是最近,Siri好像有一些问题,让我们怀疑这位"小伙伴 ...

  3. kali 插上耳机没声音

    这几天装kali装的真是心力憔悴,好不容易勉强可以使用了,插上耳机想要放松下,结果没有声音? excusu me? 在经历各种方法之后终于找到了解决方法,亲测可行. 1.先打开终端,输入systemc ...

  4. C语言随笔5：函数、函数指针

    函数 C语言中函数参数传递时,将实参的值拷贝到函数参数的存储区中.这种传递参数的方式称为按值传递. 函数不会访问实参本身,访问的是函数存储在栈区的副本,不会改变实参.函数凋用结束,函数在栈区的内容释放 ...

  5. 普及C组第一题（8.9）

    2297. [noip普及组2(放到第一题)]棋盘 (好像重名了)(File IO): input:chess.in output:chess.out 题目描述 众所周知,国际象棋的棋盘是一个网格.国 ...

  6. Spring 属性依赖注入

    1.1    属性依赖注入 依赖注入方式:手动装配 和 自动装配 手动装配:一般进行配置信息都采用手动 基于xml装配:构造方法.setter方法 基于注解装配: 自动装配:struts和spring ...

  7. Python 多任务(线程) day1

    多任务就是可以让一台电脑同时执行多个命令. 以前的单核cpu是怎么做到同时执行多个命令的?(时间片轮转) ——其实以前的单核CPU是让操作系统交替执行命令,每个任务执行0.01秒,这样看起来就像是在同 ...

  8. zabbix-agent不能启动：配置文件出现特殊字符导致

    问题如下: 定位查找问题: 命令:journalctl  -xe [重点] 图中可见错误信息在zabbix_agent配置文件中的“hostname=”中不能出现特殊字符,我出错的原因是写成了:hos ...

  9. php用户名正则验证

    在php中,通过正则表达式对用户名进行格式验证,烦了我好久,终于找到了解决办法,在这里分享给大家. 用户名验证规则:用户名只能由数字.字母.中文汉字及下划线组成,不能包含特殊符号. <?php ...

  10. 【C语言】求1到100的和

    #include<stdio.h> int main() { ; ; ; ) { sum = sum + number; number = number + ; i = i + ; } p ...