- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 提交表单 </title>
- </head>
- <body>
- <script type="text/javascript">
- /* String.prototype.trim()=function () {
- return this.replace(/^\s+/,"").replace(/\s+$/,"");
- }*/
- var ok=false;
- function checkUsername(username) {
- var usernameError=document.getElementById("usernameError");
- username=username.trim();
- if(username === ""){
- usernameError.innerHTML="用户名不能为空";
- ok=false;
- }else{
- if(username.length>6 && username.length <14){
- usernameError.innerHTML="用户名的长度在 6 到 14 位";
- ok=false;
- }else{
- usernameError.innerHTML="";
- ok=true;
- }
- }
- }
- function clearUsernameError() {
- var usernameError=document.getElementById("usernameError");
- usernameError.innerHTML="";
- }
- function checkPwd() {
- var password=document.getElementById("password");
- var confirmPasswd=document.getElementById("confirmPasswd");
- var pwdError=document.getElementById("pwdError");
- if(password === confirmPasswd){
- pwdError.innerHTML="";
- ok=true;
- }else{
- pwdError.innerHTML="密码不对";
- ok=false;
- }
- }
- function clearPwdError() {
- var pwdError=document.getElementById("pwdError");
- pwdError.innerHTML="";
- }
- function checkAll() {
- var username=document.getElementById("username").value;
- if(checkUsername(username) && checkPwd()){
- var userForm=document.getElementById("userForm");
- userForm.action="";
- userForm.method="get";
- userForm.submit();
- }
- }
- </script>
- <form id="userForm">
用户名 <input type="text"
- id="username"
- name="username"
- onblur="checkUsername(this.value)"
- onfocus="clearUsernameError();" />
- <span id="usernameError"></span><br>
密码 < input type="password"
- id="password"
- name="password"
- onfocus="clearPwdError();" /><br>
确认密码 <input type="password"
- id="confirmPasswd"
- name="confirmPasswd"
- onblur="checkPwd()"
- onfocus="clearPwdError();" />
- <span id="pwdError"></span><br>
- <input type="button"
- value="注册"
- onclick="checkAll();" /><br>
- </form>
- </body>
- </HTML>
JS 的表单
来源: http://www.bubuko.com/infodetail-3357440.html