JavaScript验证Form提交信息

 

这段代码展示的是典型的表单提交验证方法，

这段代码的验证发生在客户端，可以在传输数据之前对信息进行简单处理。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function judge() {
        var f=document.form;
        if(f.name.value!="Heng"){
            f.name.focus();
            f.name.select();
            return false;
        }
        if(f.password.value!="123"){
            f.password.focus();
            f.password.select();
            return false;
        }
        alert("跳转至action指定的界面")
        return true;
    }
</script>
</head>
<body>
<form name="form" action="123.jsp" method="post" onsubmit="return judge()">
    name<input type="text" name="name"><br>
    password<input type="password" name="password">    <br>
    <input type="submit" value="验证">    
</form>
    
</body>
</html>

 

表单验证顺序：

1、点击submit，进行表单提交

<input type="submit" value="验证">

2、调用onsubmit中所指向的方法进行验证

<form name="form" action="123.jsp" method="post" onsubmit="return judge()">

3、根据方法返回值进行判断，如果为true则进行action的跳转，如果为false则发生相应的操作

ps：judge() 起到验证的作用，如果name表单value不等于Heng或password表单value不等于123judge()都会返回false

并将错误内容选中，焦点指向此文本

function judge()

返回TRUE

返回FALSE

 

 

posted @ 2017-03-26 10:15  runningboys  阅读(227)  评论(0)  编辑  收藏  举报