<!--
表单提交两种方法：
（1）修改默认submit，通过在form标签中定义事件οnsubmit="checkForm()"；
（2）自定义提交，自定义个button，通过onclick事件触发，用form对象中的submit方法控制
-->
<!--以下是方法（1）-->
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
function checkUser(){
//alert("haha");
var flag;//定义标记，用户记录用户名是否校验成功
var oUserName = document.getElementsByName("user")[0];
var name = oUserName.value;
//alert(name);
var reg = new RegExp("^[a-z]{4}$","i");
var oSpanNode = document.getElementById("userspan");
if(reg.test(name)){
oSpanNode.innerHTML = "用户名正确".fontcolor("blue");
flag = true;
}else{
oSpanNode.innerHTML = "用户名错误".fontcolor("red");
flag = false;
}
return flag;
}
//定义提交事件处理
function checkForm(){
//这里只需要判断校验结果是否正确即可
if(checkUser()){
return true;
}else{
return false;
}
}
</script>
<!-- 因为校验结果无非两种：true和false，所以这里直接在onsubmit事件中用return语句得到校验结果，如果返回的是true，
单击"提交数据"按钮就就提交数据，如果返回的是false，单击“提交数据”不会提交数据，这里只需要明确是true还是false即可，
其余不管，底层代码已经完成其余功能 -->
<form οnsubmit="return checkForm()">
用户名称：<input type="text" name="user" οnblur="checkUser()"/>
<span id="userspan"></span>
<br/>
输入密码：<input type="text" name="psw" />
<span id="pswspan"></span>
<br/>
<input type="submit" value="提交数据" />
</form>
<!-- 由于submit按钮只要一点击，就会把现有表单数据打包提交给服务端，正常情况下我们需要先对现有数据进行校验，校验
通过后再提交，校验不通过绝对不提交，又因为submit带有默认提交事件，即不经过校验直接提交，所以我们必须修改这个默认
提交事件，那么在form标签中定义新事件οnsubmit="checkForm()" -->
</body>
</html>
<!-- ============================================================================================================= -->
<!--以下是方法（2）-->
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
function checkUser(){
var flag;
var oUserName = document.getElementsByName("user")[0];
var name = oUserName.value;
var reg = new RegExp("^[a-z]{4}$","i");
var oSpanNode = document.getElementById("userspan");
if(reg.test(name)){
oSpanNode.innerHTML = "用户名正确".fontcolor("blue");
flag = true;
}else{
oSpanNode.innerHTML = "用户名错误".fontcolor("red");
flag = false;
}
return flag;
}
function mySubmit(){
/*
*打开DHTML API文档，在form对象中有如下方法：
* submit：提交表单
*/
var oFormNode = document.getElementById("formid");
if(checkUser()){//只有用户名正确才提交
oFormNode.submit();
}
}
</script>
<form id="formid">
用户名称：<input type="text" name="user" οnblur="checkUser()"/>
<span id="userspan"></span>
<br/>
输入密码：<input type="text" name="psw" />
<span id="pswspan"></span>
<br/>
</form>
<input type="button" value="我的提交数据" οnclick="mySubmit()" />
</body>
</html>
复制代码我目前是在职java开发，如果你现在也想学习java开发技术，在入门学习java的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的java学习交流裙：前面：893 中间：241 后面：279。里面聚集了一些正在自学java的初学者,转行者，初阶者，我这里也有我做java技术这段时间整理的一些java学习手册，java大厂面试题，java语法pdf，需要的话都可以找裙猪获取。
