JavaScript验证Form提交信息

最新推荐文章于 2023-11-07 08:32:45 发布

weixin_30552635

最新推荐文章于 2023-11-07 08:32:45 发布

阅读量109

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhanghengstdu/p/6621879.html

版权

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

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

<!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

转载于:https://www.cnblogs.com/zhanghengstdu/p/6621879.html

weixin_30552635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript验证Form提交信息

这段代码展示的是典型的表单提交验证方法，这段代码的验证发生在客户端，可以在传输数据之前对信息进行简单处理。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script ...
复制链接

扫一扫