注冊表單驗證

最近在嘗試學習開發一個網站，現將登錄頁面的表單驗證總結如下

表單校驗分析

1.用戶名：單詞字符，8到20位 2.密碼：單詞字符，8到20位 3.email：郵箱格式 4.姓名：漢字非空 5.手機號：手機號格式 6.出生日期：非空 7.驗證碼：4個字符非空

表單驗證的JS代碼

如果輸入內容不符合要求，邊框則會變為紅色，輸入正確則邊框顏色恢復。

<script>/*表單校驗1.用戶名：單詞字符，8到20位2.密碼：單詞字符，8到20位3.email：郵箱格式4.姓名：非空5.手機號：手機號格式6.出生日期：非空7.驗證碼：非空*///校驗用戶名function checkUsername() {//1.獲取用戶名值var username = $("#username").val();//2.定義正則，var reg_username=/^\w{8,20}$/;//3.判斷，給出提示信息var flag = reg_username.test(username);if(flag){//用戶名合法$("#username").css("border","");}else{//用戶名非法,加一個紅色邊框$("#username").css("border","1px solid red");}return flag;}function checkPassword(){//1.獲取密碼var password = $("#password").val();//2.定義正則，var reg_password=/^\w{8,20}$/;//3.判斷，給出提示信息var flag = reg_password.test(password);if(flag){//密碼合法$("#password").css("border","");}else{//密碼非法,加一個紅色邊框$("#password").css("border","1px solid red");}return flag;}//校驗郵箱function checkEmail(){//1.獲取郵箱var email = $("#email").val();//2.定義正則var reg_email=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//3.判斷var flag=reg_email.test(email);if(flag){$("#email").css("border","");}else{$("#email ").css("border","1px solid red");}return flag;}function checkName(){var name = $("#name").val();var reg_name=/^[\u4e00-\u9fa5]{0,}$/var flag=reg_name.test(name);if(flag){$("#name").css("border","");}else{$("#name").css("border","1px solid red");}return flag;}function checkTelephone(){var telephone = $("#telephone").val();var reg_telephone=/^1[3456789]\d{9}$/var flag=reg_telephone.test(telephone);if(flag){$("#telephone").css("border","");}else{$("#telephone").css("border","1px solid red");}return flag;}function checkCheck(){var check = $("#check").val();var reg_check=/^\w{4}$/;var flag=reg_check.test(check);if(flag){$("#check").css("border","");}else{$("#check").css("border","1px solid red");}return flag;}//當表單提交時，調用所有的校驗方法$(function () {//當表單提交時，調用所有的校驗方法$("#registerForm").submit(function(){return checkUsername() && checkPassword()&&checkEmail()&&checkName()&&checkTelephone()&&checkCheck();//如果這個方法沒有返回值，或者返回值為TRUE，表單提交。如果返回值為FALSE，則表單不提交。});//當某一個組件失去焦點時，調用對應的校驗方法$("#username").blur(checkUsername);$("#password").blur(checkPassword);$("#email").blur(checkEmail);$("#name").blur(checkName);$("#telephone").blur(checkTelephone);$("#check").blur(checkCheck);});</script>

效果圖

圖中紅色邊框的密碼則為不符合規范輸入。

總結

以上是生活随笔為你收集整理的JavaWeb前端开发注册表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。