精华内容
下载资源
问答
  • 表单验证几乎在每个需要注册或者是登录的网站都是必不可少,下面通过本篇文章给大家介绍JavaScript表单验证实例之验证表单项是否为空,涉及到js表单验证实例相关知识,对js表单验证实例代码需要的朋友一起学习吧
  • _JavaScript表单验证实例 js 前端 例子_JavaScript表单验证实例 js 前端 例子
  • 本文件属于文章《原生javascript表单验证实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。
  • JavaScript - 表单验证实例

    千次阅读 2015-04-26 14:01:15
    表单验证1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ; charset=UTF-8"> 表单验证

    表单验证1

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>表单验证</title>
        <script type="text/javascript">
            //用户名非空,长度为6-14,只能包含数字、字母、下划线
            function checkUsername(){
                var username=document.getElementById("username").value;
                var usernameinfo=document.getElementById("usernameinfo");
                //alert(username.length);
                for(var i=0;i<username.length;i++){
                    var s=username.toLowerCase().substring(i,i+1);
                    if(!(s>=0&&s<=9)&&!(s>="a"&&s<="z")&&(s!="_")){
                        usernameinfo.innerHTML="用户名只能包含数字、字母、下划线!";
                        usernameinfo.style.color="#f00";
                    }else{
                        usernameinfo.innerHTML="";
                    }
                }
    
                if(username==""){
                    usernameinfo.innerHTML="用户名不能为空!";
                    usernameinfo.style.color="#f00";
                }else if(username.length<6||username.length>14){
                    usernameinfo.innerHTML="用户名长度在6-14之间!";
                    usernameinfo.style.color="#f00";
                }else{
                    usernameinfo.innerHTML="";
                }
            }
        </script>
    </head>
    <body>
        <form action="success.html" method="post">
            名字:<input type="text" id="username" onblur="checkUsername();"/><span id="usernameinfo"></span><br/>
            出生日期:
            <select id="year">
                <option value="0">--年--</option>
                <script type="text/javascript">
                    for(var i=1900;i<=new Date().getFullYear();i++){
                        document.write("<option value="+i+">"+i+"</option>");
                    }
                </script>       
                </select>&nbsp;
    
                <select id="month">
                <option value="0">--月--</option>
                <script type="text/javascript">
                    for(var i=1;i<=12;i++){
                        document.write("<option value="+i+">"+i+"</option>");
                    }
                </script>       
                </select>&nbsp;
    
                <select id="day">                   
                <option value="0">--日--</option>
                <script type="text/javascript">
                    for(var i=1;i<=31;i++){
                        document.write("<option value="+i+">"+i+"</option>");
                    }
                </script>       
                </select>
        </form>
            <br/>
            <input type="submit" value="注册" />
    </body>
    </html>

    表单验证2

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>表单验证</title>
    <script type="text/javascript">
        //校验输入
        function checkInput(){
            var flag=false;
            var username=$("username").value;
            var pwd=$("pwd").value;
            var repwd=$("repwd").value;
            var email=$("email").value;
    
            if(username==""){
                alert("用户名不能为空!");
            }else if(pwd==""){
                alert("密码不能为空!");
            }else if(pwd.length<6){
                alert("密码必须大于6位");
            }else if(pwd!=repwd){
                alert("密码不一致!");
            }else if(email.indexOf("@")==-1 ||email.indexOf(".")==-1){
                alert("邮箱格式不正确!");
            }else{
                flag=true;
            }
    
            //限定用户名不能包含数字
            for(var i=0;i<username.length;i++){
            var s=username.substring(i,i+1);
            if(!isNaN(s)){
            alert("用户名不能包含数字!")
                return false;
                }
            }
            return flag;
        }
            //获取焦点时清除原内容
            function clearUsername(){
                var username=$("username");
                username.style.border="1px solid #f00";
                if(username.value=="请输入正确的用户名"){
                username.value="";
                }
            }
            //失去焦点时检验用户名
            function  checkUsername(username){
                username.style.border="";
                if(username.value==""){
                    $("usernameinfo").style.font="normal 15px 宋体";
                    $("usernameinfo").style.color="#f00";
                    $("usernameinfo").innerHTML="用户名不能为空";
                    username.focus();
                }else if(username.value.length>14||username.value.length<6){
                    $("usernameinfo").style.font="normal 15px 宋体";
                    $("usernameinfo").style.color="#F00";
                    $("usernameinfo").innerHTML="用户名长度必须在6-14之间!";
                    //username.select();//此代码在IE和Chrome中好使,在Firefox中不好使
                    //匿名函数
                    setTimeout(function(){username.select();},0);               
                }else{
                    $("usernameinfo").innerHTML="";
                }
            }
    
            function $(id){
                return document.getElementById(id);
            }
    </script>
    </head>
    <body>
    <form action="success.html" method="post" onsubmit="return checkInput();">
            <table border="0" cellpadding="0" cellspacing="0" width="600px">
                <tr>
                    <td align="right">用户名:</td>
                    <td><input type="text" name="userbname" id="username" value="请输入正确的用户名" onfocus="clearUsername()" onblur="checkUsername(this)"/><span id="usernameinfo"></span></td>
                </tr>
                <tr>
                    <td align="right">密码:</td>
                    <td><input type="password" name="pwd" id="pwd"/></td>
                </tr>
                <tr>
                    <td align="right">确认密码:</td>
                    <td><input type="password" name="repwd" id="repwd"/></td>
                </tr>
                <tr>
                    <td align="right">电子邮箱:</td>
                    <td><input type="text" name="email" id="email"/><br/></td>
                </tr>
                <tr>
                <td></td>
             <td>&nbsp;&nbsp;<input type="submit" value="注册"/>&nbsp;&nbsp;<input type="reset" value="重置"/></td>     
               </tr>
            </table>
    </form>
    
    </body>
    </html>
    展开全文
  • js表单验证实例,HTML文件,javascript常用表单验证: 账号、密码、身份证等
  • 表单的各种javascript验证 实例
  • 表单验证实例

    2012-05-19 14:10:59
    表单验证实例,包含用户名密码等内容的匹配检测,利用了JS
  • JavaScript表单验证

    2013-07-27 17:03:24
    里面有JS表单验证常用的一些方法和调用的实例,注释详细,适合快速开发表单型的网页
  • js表单验证实例讲解

    2020-11-23 05:07:30
    本文实例为大家分享了js表单验证,供大家参考,具体内容如下 JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些...表单验证实例</title> <meta http-equiv="Content-Type" content="text/html; c
  • JavaScript表单验证开发

    2020-11-29 04:35:32
    本文实例为大家分享了js表单验证的具体代码,供大家参考,具体内容如下 在线demo:http://www.hui12.com/nbin/csdn/jsInput/demo.html  效果图: /* 验证类型 testName: "验证用户", testPassword: "密码", ...
  • JavaScript 表单验证

    2019-06-05 13:57:00
    JavaScript 表单验证 HTML 表单验证能够通过 JavaScript 来完成。 如果某个表单字段(fname)是空的,那么该函数会发出一条警告消息,并返回 false,以防止表单被提交出去: JavaScript 实例 function ...

    JavaScript 表单验证

    HTML 表单验证能够通过 JavaScript 来完成。

    如果某个表单字段(fname)是空的,那么该函数会发出一条警告消息,并返回 false,以防止表单被提交出去:

    JavaScript 实例

    function validateForm() {
        var x = document.forms["myForm"]["fname"].value;
        if (x == "") {
            alert("必须填写姓名");
            return false;
        }
    }
    该函数能够在表单提交时被调用:

    HTML 表单实例

    <form name="myForm" action="/action_page_post.php" οnsubmit="return validateForm()" method="post">
    姓名:<input type="text" name="fname">
    <input type="submit" value="Submit">
    </form>
    

    具体实例测试如下

    <!DOCTYPE html>
    <html>
        <head>
        <script>
            function validateForm() {
                var x = document.forms["mysForm"]["fname"].value;
                if (x == "") {
                    alert("必须填写姓名!");
                    return false;
                }
            }
        </script>
        </head>
    <body>
    
    <form name="mysForm" action="/demo/action_page.php" οnsubmit="return validateForm()" method="post">
    姓名:<input type="text" name="fname">
    <input type="submit" value="提交">
    </form>
    
    </body>
    </html>        
    

      

    展开全文
  • 下面给大家分享bootstrap表单验证实例代码,具体代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../include/taglib....
  • JavaScript 表单验证及API验证1.JavaScript 表单验证2.HTML 表单自动验证3.数据验证4.E-mail 验证5.JavaScript 验证 API 1.JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成。 以下实例代码用于...

    1.JavaScript 表单验证

    1. HTML 表单验证可以通过 JavaScript 来完成。

    2. 以下实例代码用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息,阻止表单提交:

    function validateForm() {
        var x = document.forms["myForm"]["fname"].value;
        if (x == null || x == "") {
            alert("需要输入名字。");
            return false;
        }
    }
    

    2.HTML 表单自动验证

    • HTML 表单验证也可以通过浏览器来自动完成。

    • 如果表单字段 (fname) 的值为空, required 属性会阻止表单提交:

    <form action="demo_form.php" method="post">
      <input type="text" name="fname" required="required">
      <input type="submit" value="提交">
    </form>
    

    3.数据验证

    1. 数据验证用于确保用户输入的数据是有效的。
    2. 典型的数据验证有:

    • 必需字段是否有输入?
    • 用户是否输入了合法的数据?
    • 在数字字段是否输入了文本?
    • 大多数情况下,数据验证用于确保用户正确输入数据。
    • 数据验证可以使用不同方法来定义,并通过多种方式来调用。
    • 服务端数据验证是在数据提交到服务器上后再验证。
    • 客户端数据验证 side validation是在数据发送到服务器前,在浏览器上完成验证。
    • 必填(或必选)项目 如下
    function validateForm()
    {
      var x=document.forms["myForm"]["fname"].value;
      if (x==null || x=="")
      {
        alert("姓必须填写");
        return false;
      }
    }
    
    // 以上函数在 form 表单提交时被调用:
    <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">: <input type="text" name="fname">
    <input type="submit" value="提交">
    </form>
    

    4.E-mail 验证

    1. 下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

    2. 意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

    function validateForm(){
      var x=document.forms["myForm"]["email"].value;
      var atpos=x.indexOf("@");
      var dotpos=x.lastIndexOf(".");
      if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
        alert("不是一个有效的 e-mail 地址");
        return false;
      }
    }
    
    //下面是连同 HTML 表单的完整代码:
    <form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
        Email: <input type="text" name="email">
        <input type="submit" value="提交">
    </form>
    

    5.JavaScript 验证 API

    约束验证 DOM 方法

    checkValidity()	// 如果 input 元素中的数据是合法的返回 true,否则返回 false。
    
    setCustomValidity()  
    /*设置 input 元素的 validationMessage 属性,用于自定义错误提示信息的方法。
    使用 setCustomValidity 设置了自定义提示后,validity.customError 就会变成true,
    则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示,方式如下:*/
    setCustomValidity('') 
    setCustomValidity(null) 
    setCustomValidity(undefined)
    

    以下实例如果输入信息不合法,则返回错误信息:

    <button onclick="myFunction()">验证</button>
    <p id="demo"></p>
    <script>
    function myFunction() :
    	var inpObj = document.getElementById("id1");
    	if (inpObj.checkValidity() == false) {
    	document.getElementById("demo").innerHTML = inpObj.validationMessage;
    	}
    }
    </script>
    
    展开全文
  • *******JavaScript使用正则表达式进行邮箱表单验证实例************ 1.在JavaScript中也可以使用正则表达式对表单输入的数据进行验证格式如下 /正则表达式/.test(验证内容) 扩展:JavaScript中正则表达式对象...
    *******JavaScript使用正则表达式进行邮箱表单验证实例************
    
    1.在JavaScript中也可以使用正则表达式对表单输入的数据进行验证格式如下
    /正则表达式/.test(验证内容)

    扩展:JavaScript中正则表达式对象(RegExp)存在3个方法
            *(1)test()
                test() 方法检索字符串中的指定值。返回值是 true 或 false。
            *(2)exec()
                exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
            *(3)compile()
                compile() 方法用于改变 RegExp。
                compile() 既可以改变检索模式,也可以添加或删除第二个参数。
                
                详情请参照w3school 网址<a href="http://www.w3school.com.cn/js/js_obj_regexp.asp">JavaScript RegExp 对象</a>


    2.Onsubmit 事件是一个在表单上编写的事件操作,只要是表单提交都要触发此事件

    实例:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>email 验证</title>
            <script language="javascript">
                function valuedate(f){
                    var value = f.mytext.value;
                    if(!/^\w+@\w+.\w+$/.test(value)){
                        alert("邮箱格式不正确!请重新输入");
                        f.mytext.focus();
                        f.mytext.select();
                        return false;
                    }else{
                    return true;
                    }
                }
            </script>
        </head>
        
        <body>
            <form action="test.html" method ="post" name ="myform" οnsubmit="return valuedate(this)">
                email:<input type ="text" name ="mytext"/><br/>
                <input type = "submit"/ value="提交">
            </form>
        </body>

    </html>
    展开全文
  • javascript实现表单验证

    2020-10-22 21:51:38
    主要介绍了javascript实现表单验证的相关资料,以一个完整的实例javascript实现表单验证的方法进行分析,感兴趣的小伙伴们可以参考一下
  • 实例讲解:验证输入的是否是数字,是否满足数字位数,如果错误,并进行友情提醒。 效果图: <!DOCTYPE html> <html> <body> 我的第一段 JavaScript 请输入数字。如果输入值不是数字,浏览器会弹出...
  • 大家在前端开发过程中总会遇到一些表单,难免会碰到一些正则表达式,以下为一些简单表单实例的正则表达式,仅供参考,具体可以自行修改: /*是否带有小数*/ function isDecimal(strValue ) { var objRegExp= /^\...
  • 主要介绍了JavaScript常用验证函数,实例汇总了如字符串验证、表单验证及js常用特效等诸多js常用验证函数及相关技巧,非常具有实用价值,需要的朋友可以参考下
  • 实例javascript表单验证的例子

    万次阅读 2014-09-21 20:50:35
    //用来第二次验证密码的 //检查用户名 function checkUser(userNode) { var name = userNode.value; var namereg = /^[a-z]{5}$/i; //意为:忽略大小写,从开始到结尾都是英文字符,其字符长度为5 //最后...
  • JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成。 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则阻止表单提交: JavaScript 实例 function validateForm() ...
  • 表单控件分为含JS验证和不含JS验证(具体详情请参照表单控件实例1(不含JavaScript验证)) ​​<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>From ...
  • javascript源代码_实例知识讲解!
  • 本文实例为大家分享了js表单验证的实现方法,供大家参考,具体内容如下 第一种:js表单验证 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册-个人用户&...
  • 在上篇文章给大家介绍了js操作表单实例讲解(下)的相关知识,本文接着给大家介绍Javascript操作表单实例讲解(下),具体详情如下所示: 一、文本域 <input type=text /> —————————– 操作文本域的值...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,010
精华内容 12,804
关键字:

javascript表单验证实例

java 订阅