zoukankan      html  css  js  c++  java
  • 原生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="100%;margin-bottom:10px;" type="password" name="xxx1" placeholder="请输入密码"/>
    <input id='xxx2' style="100%;margin-bottom:10px;" type="password" name="xxx2" placeholder="确认密码" onblur="a()" />
    <input id='xxx3' style="100%;margin-bottom:10px;" type="text" name="xxx3" placeholder="请输入邮箱" />
    </div>
    </body>
    </html>

  • 相关阅读:
    互联网人25岁毕业 拿一万块钱月薪 (转)
    在windows平台编译openAL Android 库
    lua简单包装
    libevent 简单学习
    cocos2dx中使用tolua++使lua调用c++函数
    《OpenGL超级宝典》编程环境配置
    快速排序、归并排序、堆排序三种算法性能比较
    二叉树的三种遍历的递归与非递归算法
    boost之bind
    boost之内存管理
  • 原文地址:https://www.cnblogs.com/chenyoumei/p/7448326.html
Copyright © 2011-2022 走看看