search

Home >Web Front-end >HTML Tutorial >button button, combined with the onclick event, validates and submits the form

button button, combined with the onclick event, validates and submits the form

WBOY
WBOYOriginal
2016-11-30 23:59:401531browse
<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html </span><span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff">></span>
 <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span> new document <span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="Content-Type"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="text/html;charset=UTF-8"</span> <span style="color: #0000ff">/></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #0000ff">></span>
  <span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">button 按钮，结合onclick事件，验证和提交表单</span>
  <span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000"> checkForm(){
        </span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">判断用户名是否为空</span>
        <span style="background-color: #f5f5f5; color: #0000ff">if</span><span style="background-color: #f5f5f5; color: #000000">(document.form1.username.value</span><span style="background-color: #f5f5f5; color: #000000">==</span><span style="background-color: #f5f5f5; color: #000000">""</span><span style="background-color: #f5f5f5; color: #000000">){
                window.alert(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">用户名不能为空</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">);
        }</span><span style="background-color: #f5f5f5; color: #0000ff">else</span> <span style="background-color: #f5f5f5; color: #0000ff">if</span><span style="background-color: #f5f5f5; color: #000000">(document.form1.username.value.length</span><span style="background-color: #f5f5f5; color: #000000"><</span><span style="background-color: #f5f5f5; color: #000000">5</span> <span style="background-color: #f5f5f5; color: #000000">||</span><span style="background-color: #f5f5f5; color: #000000"> document.form1.username.value.length</span><span style="background-color: #f5f5f5; color: #000000">></span><span style="background-color: #f5f5f5; color: #000000">20</span><span style="background-color: #f5f5f5; color: #000000">){
            window.alert(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">用户名长度必须介于5-50个字符之间！</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">);
        }</span><span style="background-color: #f5f5f5; color: #0000ff">else</span><span style="background-color: #f5f5f5; color: #000000">{
            </span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">使用form对象的submit()方法，实现提交。</span>
<span style="background-color: #f5f5f5; color: #000000">            document.form1.submit();        
        }
  }
 </span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
 <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
 <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">form </span><span style="color: #ff0000">name</span><span style="color: #0000ff">="form1"</span><span style="color: #ff0000"> method</span><span style="color: #0000ff">="get"</span><span style="color: #ff0000"> action</span><span style="color: #0000ff">="login.php"</span><span style="color: #0000ff">></span><span style="color: #000000">
  用户名：</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="username"</span> <span style="color: #0000ff">/></span><span style="color: #000000">
  密码：</span><span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="password"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="userpwd"</span> <span style="color: #0000ff">/></span>
  <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">="提交表单"</span><span style="color: #ff0000"> onclick</span><span style="color: #0000ff">="checkForm()"</span> <span style="color: #0000ff">/></span>
  <span style="color: #0000ff"></</span><span style="color: #800000">form</span><span style="color: #0000ff">></span>
 <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

 

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css limits single line text input, use... to replace the excess partNext article：css limits single line text input, use... to replace the excess part

Related articles

See more