2. 程式人生 > >js驗證表單

js驗證表單

阿新 • • 發佈：2018-12-17

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head></head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>會員註冊</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!--引入校驗工具 -->
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
        body {
            margin: 0 auto;
            margin-top: 150px;
            background-image: url("image/regist_bg.jpg");
        }
        
        .carousel-inner .item img {
            width: 100%;
            height: 300px;
        }
        
        font {
            color: #3164af;
            font-size: 18px;
            font-weight: normal;
            padding: 0 10px;
        }
</style>
<script type="text/javascript">
/* 
        $(function(){
            $("#registform").validate({
                rules:{
                    "username":{"required":true
                        },
                    "password":{
                        "required":true,
                         "rangelength":[6,10]
                    },
                    "confirm_password":{
                        "required":true,
                        "equalTo":"#password" 
                    },
                    "email":{
                        "required": true,
                        "email":true
                    },
                    "name":{
                        "required": true,
                    }
                },
                messages:{
                    "username":{
                        "required":"請填寫使用者名稱"
                    },
                    "password":{
                        "required":"請填寫密碼",
                        "rangelength":"密碼長度應為6-12位"
                    },
                    "confirm_password":{
                        "required":"請填寫密碼",
                        "equalTo":"兩次密碼輸入不一致"
                    },
                    "email":{
                        "required":"郵箱不能為空",
                        "email":"請輸入正確的郵箱格式"
                    },
                    "name":{
                        "required": "姓名不能為空"
                    }
                }
            });
        }); */
    
</script>
<script type="text/javascript">
    
    //根據id獲取節點  
    function $(id) {
        return document.getElementById(id);
    }

    //根據id獲取節點的值  
    function $V(id) {
        return $(id).value;
    }

    //獲取ajax物件  
    function getXhr() {
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHttp')
        }
        return xhr;
    }
    //獲取lable元素,將錯誤資訊設定給lable物件

    
    //檢驗使用者名稱不能為空且不能重複
    function checkUserName(){
        var username=$("username");
        var uname=$V("username");
        if(uname.length == 0){
            $("msg").innerHTML='使用者名稱不能為空';
        }else{
            $("msg").innerHTML='';
            //使用AJAX,驗證使用者名稱是否存在;
            var xhr=getXhr();
            xhr.open('get','${pageContext.request.contextPath}/checkUsername?uname='+ uname,true);
            xhr.send();
            xhr.onreadystatechange=function(){
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var value = xhr.responseText;
                    $("msg").innerHTML=value;
                }
            }
        }
    }
    
    //校驗密碼不能為空,且開頭是大寫字母;
    function  checkPwd(){
        var pwd=$V("password");
        console.log(pwd);
        var reg=/^[A-Z]+[a-z0-9]+$/;
        $("msg").innerHTML='';
        if(! reg.test(pwd)){
            $("msg").innerHTML="以大寫字母開頭,由字母和數字組成";
        }
        if (pwd.length < 6 || pwd.length > 12){
            $("msg").innerHTML="密碼長度為應6-12位";
        }
        if(pwd.length==0){
            $("msg").innerHTML="密碼不能為空";
        }
    }
    
    //驗證確認密碼
    function valitadePwd(){
        //獲取元素中的值
        var pwd1 = $V("password");
        var pwd2 = $V("confirm_password");
        console.log(pwd2);
        if(pwd2 != pwd1){
            $("msg").innerHTML="兩次密碼輸入不一致";
        }else{
            $("msg").innerHTML="";
        }
        if(pwd2.length==0){
            $("msg").innerHTML="密碼不能為空";
        }
    }
    //驗證emial
    function validateEmail(){
        var vemail=$V("inputEmail");
        var reg=/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/;
        if (!reg.test(vemail)) {
            $("msg").innerHTML="請輸入正確的郵箱格式";
        }else{
            $("msg").innerHTML="";
        }
    }
    
    //驗證姓名
    function validateName(){
        var name=$V("usercaption");
        var reg=/^([\u4e00-\u9fa5]){2,10}$/; //只能是中文，長度為2-7位
        if (!reg.test(name)) {
            $("msg").innerHTML="請輸入中文姓名長度為2-10位";
        }else{
            $("msg").innerHTML="";
        }
    }
    
    //驗證手機號
    function validatTel(){
        var tel=$V("telephone");
        var reg= /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!reg.test(tel)) {
            $("msg").innerHTML="請輸入合法的手機號";
        }else{
            $("msg").innerHTML="";
        }
    }
    
    //更新驗證碼
    function changeCode() {
        document.getElementById("myCode").src = "${pageContext.request.contextPath}/bulideCode?code="+ new Date().getSeconds();
    }
    
    //檢查驗證碼輸入是否正確;
    function checkCode() {
        //獲取ajax物件
        var xhr = getXhr();
        //獲取驗證碼輸入框中的值
        var vCode = $V("validateCode");
        //獲取提交按鈕元素
        //建立連線;將值傳入到後端;
        xhr.open('get', '${pageContext.request.contextPath}/checkCode?vCode='+ vCode, true);
        //傳送請求
        xhr.send();
        //判斷xhr物件的狀態改變情況
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //獲取響應回的資料
                var value = xhr.responseText;
                //驗證成功,將提交按鈕設定為可用
                if ("驗證成功" == value) {
                    $("msg").innerHTML="";
                    $("commitForm").disabled = false;
                }else{
                    //獲取lable元素,並且將資訊設定給lable物件
                    $("msg").innerHTML=value;
                }
            }
        }
    }
</script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
            </div>
            <div class="col-md-6"
                style="background: #fff;  padding: 40px 20px;  border: 6px solid #ccc;">
                <div class="col-sm-3"></div>
                <div class="col-sm-7"><font>使用者註冊</font>USER REGISTER<hr/></div>
                <form id="registform" class="form-horizontal" style="margin-top:10px;" method="post" action="${pageContext.request.contextPath}/register">
                    <div class="form-group">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-6">
                            <label id="msg" style="color:red ;"></label>
                        </div>
                        <div class="col-sm-3"></div>
                    </div>
                    <div class="form-group">
                        <label for="username" class="col-sm-3 control-label">使用者名稱</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="username" name="username" onblur="checkUserName()"
                                placeholder="請輸入使用者名稱">
                        </div>
                        <div class="col-sm-3"></div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-3 control-label">密碼</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="password" name="password" onblur=" checkPwd()"
                                placeholder="大寫字母開頭,長度為6-12位">
                        </div>
                        <div class="col-sm-3"></div>
                    </div>
                    <div class="form-group">
                        <label for="confirmpwd" class="col-sm-3 control-label">確認密碼</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password" onblur=" valitadePwd()"
                                placeholder="請輸入確認密碼">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
                        <div class="col-sm-6">
                            <input type="email" class="form-control" id="inputEmail" name="email" onblur="validateEmail()"
                                placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="usercaption" class="col-sm-3 control-label">姓名</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="usercaption" name="name" onblur="validateName()"
                                placeholder="請輸入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-3 control-label">聯絡方式</label>
                        <div class="col-sm-6">
                            <input type="number" class="form-control" id="telephone" name="telephone" onblur="validatTel()"
                                placeholder="請輸入你的聯絡方式">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="date" class="col-sm-3 control-label">驗證碼</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="validateCode" name="code" onblur="checkCode()">
                        </div>
                        <div class="col-sm-3">
                            <img  id="myCode" src="${pageContext.request.contextPath}/bulideCode" title="看不清,換一張" style="cursor: pointer;" onclick=" changeCode()" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-3"></div>
                        <div class=" col-sm-9">
                        <input type="submit" id="commitForm" width="100" value="註冊" name="submit" disabled="disabled"
                                style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

相關推薦

JS驗證表單是否有空項

<form action="{:url('index/addnews')}" method="post" name="news" onSubmit="return myCheck()"> <script type="text/javascript"> fun

js驗證表單

<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://j

js驗證表單提交

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>別人的註冊頁面，參考</title> <script> function c

PHP連線資料庫利用js驗證表單

1.register.php <!doctype html> <html> <head> <meta charset="utf-8"> <title>註冊</title> <script> //使用者名稱的通過i

js驗證表單必填項是否為空

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function validate_required(field,alerttxt) { with (field)

js 驗證表單不能為空 示例

function yanmsgg() { if(document.getElementById('msg_jxdanwei').value=='') { alert('單位名稱不能為空！'); return false; } if(document.getElem

js驗證表單 驗證空值 長度，過濾非數字等

3、<!-- 驗證表單的js提交方式會不一樣 --><script type="text/javascript">function checkFormSubmit(form){if(form.username.value == ""){alert("請輸入賬號");form.usern

js驗證表單也存在中文亂碼

把pageEncoding="utf-8" 去掉，另外2個地方全換成gb2312 <%@ page language="java" contentType="text/html; charset=gb2312"%> <!DOCTYPE html PUBL

js驗證表單大全

不好意思,初來乍到，沒把握好 ,本貼被評為入門貼，以後的貼子會努力給大家帶來幫助,現在已清除了 轉貼 1. 長度限制 <script> function test()  { if(document.a.b.value.length>50) { alert(

js驗證表單輸入框

標籤： <div class="mask_box"> <div class="mask_top_01"> <div class="title"&

js正則表達式--驗證表單

con tracking 英文 data use 劃線 p地址 popu 手機號 檢測手機號碼：/0?(13|14|15|18)[0-9]{9}/ 檢測username：（數字，英文，漢字。下劃線。中橫線）：/^[A-Za-z0-9_\-\u4e00-\u9fa5]+$

js 對表單的一些驗證及正則匹配

攻擊 update 匹配規則 asc htm out gin lease public 利用的是jq的validate.js 詳見菜鳥教程http://www.runoob.com/jquery/jquery-plugin-validate.html 以下是我測試的幾個文件

利用JS提交表單的幾種方法和驗證(必看篇)

www contain 功能 ner ble 四種 利用 comm pac 第一種方式：表單提交，在form標簽中增加onsubmit事件來判斷表單提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

js顯示表單的提交驗證

return else eve borde var doc doctype table 表單 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit

[js]js的表單驗證

bmi 判斷 註意 允許 電話 ret eth 表單提交 turn http://uule.iteye.com/blog/2183622 表單驗證類 <form class="form" method="post" id=&qu

[js]js的表單驗證onsubmit方法

否則 func href method 允許 表單提交 turn this onsubmit http://uule.iteye.com/blog/2183622 表單驗證類 <form class="form" method="post

js實驗-表單驗證（正則表示式）

<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <script src="./1.js"></s

原生JS寫表單驗證提交功能

先上效果圖： 表單的基礎內容就是暱稱判斷、手機號判斷、郵箱判斷、身份證號碼判斷，這裡是用到正則驗證檢驗格式。 頁面的表單寫法就是一個form的提交。輸入框用input來實現，輸入內容用value來獲取

動態新增刪除一行,js物件表單驗證

動態新增一行: /** * 新增一行 */ function addNewColumn(id,index) { //row_count = getNowRowCount(id); var html = ''; html += '<tr class="vers

JS實現表單內容驗證、阻止表單提交（onsubmit）

onsubmit屬性只在 <form> 表單中使用。 onsubmit事件是當表單提交時進行相關JS操作的一個事件。 onsubmit事件會在表單中的確認按鈕被點選時發生。當該事件觸發的