检测提交表单内容不能为空JS/jQuery代码（基础）

Posted 2021-02-06 ColinLiu

方法一：

使用css的required属性

<input type="" required="required" name="" id="" value="" />

 

方法二：

使用JS代码示例，注意事项：form要加上onSubmit事件，form.xx.vlaue要在表单中对应name

<script type="text/javascript">
function beforeSubmit(form){
if(form.username.value==‘‘){
alert(‘用户名不能为空！‘);
form.username.focus();
return false;
}
if(form.password.value==‘‘){
alert(‘密码不能为空！‘);
form.password.focus();
return false;
}
if(form.password.value.length<6){
alert(‘密码至少为6位，请重新输入！‘);
form.password.focus();
return false;
}
if(form.password.value!=form.password2.value) {
alert(‘你两次输入的密码不一致，请重新输入！‘);
form.password2.focus();
return false;
}
return true;
}
</script>

<fieldset>
   <legend>用户注册</legend>
    <form method="post" name="form" action="user.do?method=register" onSubmit="return beforeSubmit(this);">
     <table border="1" width="100%" cellspacing="0" cellpadding="0">
      <tr><td><label>用户名：<input type="text" name="username" value=""></label></td></tr>
      <tr><td><label>密   码：<input type="password" name="password" value=""></label></td></tr>
      <tr><td><label>重复密码：<input type="password" name="password2" value=""></label></td></tr>
      <tr><td><input value="注册" type="submit"> <input type="reset" value="重置"></td></tr>      
     </table>
    </form>
</fieldset>

 

方法三：

使用jQuery方法，需要引用jquery.min.js

<form action="" id="form">
   <table align="center">
          <tr>
                <td>名称：</td>
                <td>
                      <input type="text" name="username" title="名称">     
                </td>
          </tr>

          <tr>
                <td>咨询内容：</td>
                <td>
                      <textarea rows="8" cols="45" title="咨询内容"></textarea>
                </td>
          </tr>
          <tr>
                <td align="center" colspan="2">
                      <input type="button" value="提 交" onclick="check()">
                </td>
          </tr>
   </table>
</form>


function check(){
            var checkform = document.getElementById("form");   //获得form表单对象
            for(var i=0;i<form.length;i++){                   //循环form表单
                  if(checkform.elements[i].value==""){        //判断每一个元素是否为空
                  alert(checkform.elements[i].title+"不能为空！");
                  checkform.elements[i].focus();              //元素获得焦点
                  return ;
                  }
            }
            checkform.submit();
      }