Javascript 表单提交前验证实例代码-百分百源码网

Javascript 表单提交前验证实例代码

发布时间：01/15 来源：浏览：关键词：

我们在做网站注册或提交时都希望用户提交数据时进行数据检验验证了，这样当用户输入有误数据时我们可以直接不需要服务器处理直接验证告诉用户数据有误，这样不但对服务器节省流量同时还可以提高用户体验哦。

例

给表单的加上onsubmit属性或者提交按钮的加上onclick属性，值为return check(),check是javascript函数，验证表单用的，没有return，即使验证失败也会提交。在check函数中，验证失败返回false,成功返回true.
代码：

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
    </head>
    <body>
    <form action="index.php" method="get" name="form1">
      姓名:<input type="text" name="name" id="name" /><br/>
   年龄:<input type="text" name="age" id="age" /><br/>
   <input type="submit" onclick="return check()" />

    </form>
        <script language="javascript" type="text/javascript">
    function check(){
     var age=parseInt(document.form1.age.value);
     if(age<18){
      alert("小于18");
      return false;
     }else{
      return true;
     }
    }
        </script>
    </body>
</html>

例2

利用jquery 表单验证插件validator

调用简单，样式通用，你不用再写样式。一款非常好用的网页表单验证控件。

先看看效果吧，如下图：

代码如下

<SCRIPT type=text/javascript src="js/validator.js"></SCRIPT>
<SCRIPT type=text/javascript>
    var a = validator({
        "form": "validator-form",
        ajaxSubmit:true,
        beforSubmit:function(){
            //alert("表单提交前执行的函数");
        },
        afterSubmit:function(){
            alert("ajax提交后返回的数据是："+this.responseText);
        }
    }).add({
        "target": "username",
        "rule_type": "username",
        'action':'2.php',
        'tips':'说点什么好呢'
    }).add({
        "target": "password",
        "rule_type": "password"
    }).add({
        "target": "confirm-password",
        "rule_type": "password",
        "sameTo": "password",
        'error':'你填写的密码不正确或者和原密码不同'
    }).add({
        "target": "age",
        "rule_type": "number||empty",
        "error":'虽然这玩意儿不是必填项，但既然你填了，就把它填对吧。'
    }).add({
        "target": "birthday",
        "rule_type": "date||empty"
    }).add({
        "target": "id-card",
        "rule_type": "idcard||empty"
    }).add({
        "target": "email",
        "rule_type": "email"
    }).add({
        "target": "qq",
        "rule_type": "qq||empty"
    }).add({
        "target": "telephone",
        "rule_type": "phone||empty"
    }).add({
        "target": "mobile",
        "rule_type": "mobile||empty"
    }).add({
        "target": "phone",
        "rule_type": "phone||mobile",
        "tips": "请输入您的手机或座机电话号码！"
    }).add({
        "target": "zip-code",
        "rule_type": "zip||empty"
    }).add({
        "target": "ip-address",
        "rule_type": "ip||empty"
    }).add({
        "target": "url",
        "rule_type": "url||empty"
    }).add({
        "target": "message",
        "rule_type": "require"
    });

    var reset = document.getElementById('reset');
    var del = document.getElementById('del');
    reset.onclick = function(){
        a.reset();
    }
    del.onclick = function(){
        a.remove('username');
    }

</SCRIPT>