码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-01-26 16:18:14      阅读:505      评论:0      收藏:0      [点我收藏+]

标签:register   val   cli   text   password   aci   pac   表单   for   

方法一:

使用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();
      }

 

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

标签:register   val   cli   text   password   aci   pac   表单   for   

原文地址:https://www.cnblogs.com/colinliu/p/checkform_null.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!