zoukankan      html  css  js  c++  java
  • 八十六:JavaScript之表单验证案例

    实现效果

    HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <div id="Total">
    <div id="title"> 账户信息 </div>
    <div class="item">
    <span class="important">*</span>
    <lable for="account">账号:</lable>
    <input type="text" id="account" placeholder="用户设置后不可修改">
    </div>
    <p class="item_"></p>
    <br>
    <hr>

    <div class="item">
    <span class="important">*</span>
    <lable for="password">密码:</lable>
    <input type="text" id="password" placeholder="6-20位字母、数字或符号">
    </div>
    <p class="item_"></p>
    <br>
    <hr>

    <div class="item">
    <span class="important">*</span>
    <lable for="chekPassword">确认密码:</lable>
    <input type="text" id="chekPassword" placeholder="6-20位字母、数字或符号">
    </div>
    <p class="item_"></p>
    <br>
    <hr>

    <div class="item">
    <span class="important">*</span>
    <lable for="username">姓名:</lable>
    <input type="text" id="username" placeholder="姓名,不超过五位的汉字">
    </div>
    <p class="item_"></p>
    <br>
    <hr>

    <div class="item">
    <span class="important">*</span>
    <lable for="information">身份证号:</lable>
    <input type="text" id="information" placeholder="身份证号">
    </div>
    <p class="item_"></p>
    <br>
    <hr>

    <div class="item">
    <span class="important">*</span>
    <lable for="email">邮箱:</lable>
    <input type="text" id="email" placeholder="邮箱">
    </div>
    <p class="item_"></p>
    <br>
    <hr>

    <div class="item">
    <span class="important">*</span>
    <lable for="telephone">手机号:</lable>
    <input type="text" id="telephone" placeholder="手机号">
    </div>
    <p class="item_"></p>
    <br>
    <hr>

    <div id="end">
    <input type="checkbox" id="choose">
    <lable for="choose">我已阅读并同意遵守规定</lable>
    <button id="handup">确认提交</button>
    </div>

    </div>

    </body>
    </html>
    <script src="index.js"></script>

    JS

    // 获取所有提示元素的下标
    var items = document.querySelectorAll('.item_');

    // 单项校验的结果
    var chekAccount = false,
    chekPassword = false,
    chek_chek_password = false,
    chek_username = false,
    chek_information = false,
    chek_email = false,
    chek_telephone = false;

    // 定义正则规则对象
    var regs = {
    account: /^w{6,18}$/,
    username: /^[u4e00-u9fa5]{2,5}$/,
    information: /^d{17}[0-9x]$/,
    email: /^w+@w+.[a-zA-Z_]{2,4}$/,
    telephone: /^d{11}$/
    }

    // 账号,当时鼠标离开账号输入框时验证
    var account = document.getElementById('account');
    account.onblur = function () {
    if (this.value == '') {
    items[0].innerHTML = '账号不能为空';
    items[0].style.color = 'red';
    } else {
    if (!regs.account.exec(this.value)) {
    items[0].innerHTML = '6-18位的数字、字符、下线';
    items[0].style.color = 'red';
    } else {
    items[0].innerHTML = '账号格式正确';
    items[0].style.color = 'green';
    chekAccount = true;
    }
    }
    }

    // 密码
    var password = document.getElementById('password');
    // 聚焦的时候提示密码规则
    password.onfocus = function (){
    items[1].innerHTML = '6-20位字母、数字或符号';
    items[1].style.color = 'green';
    }
    password.onblur = function () {
    if (this.value == '') {
    items[1].innerHTML = '密码不能为空';
    items[1].style.color = 'red';
    } else {
    if (!regs.account.exec(this.value)) {
    items[1].innerHTML = '6-18位的数字、字符、下线';
    items[1].style.color = 'red';
    } else {
    items[1].innerHTML = '密码格式正确';
    items[1].style.color = 'green';
    chekPassword = true;
    }
    }
    }

    // 确认密码
    var chek_password = document.getElementById('chekPassword');
    chek_password.onfocus = function (){
    items[2].innerHTML = '输入确认密码';
    items[2].style.color = 'green';
    }
    chek_password.onblur = function () {
    if (this.value == '') {
    items[2].innerHTML = '确认密码不能为空';
    items[2].style.color = 'red';
    } else {
    if (this.value != password.value) {
    items[2].innerHTML = '两次密码不一致';
    items[2].style.color = 'red';
    } else {
    items[2].innerHTML = '确认密码正确';
    items[2].style.color = 'green';
    chek_chek_password = true;
    }
    }
    }

    // 姓名
    var username = document.getElementById('username');
    username.onfocus = function (){
    items[3].innerHTML = '请输入姓名';
    items[3].style.color = 'red';
    }
    username.onblur = function (){
    if(this.value==''){
    items[3].innerHTML = '姓名不能为空';
    items[3].style.color = 'red';
    }else{
    if (!regs.username.exec(this.value)){
    items[3].innerHTML = '请输入正确的名字';
    items[3].style.color = 'red'
    }else{
    items[3].innerHTML = '姓名正确';
    items[3].style.color = 'green';
    chek_username = true;
    }
    }

    }

    // 身份证号
    var information = document.getElementById('information');
    information.onfocus = function (){
    items[4].innerHTML = '请输入身份证号';
    items[4].style.color = 'red';
    }
    information.onblur = function (){
    if(this.value==''){
    items[4].innerHTML = '身份证不能为空';
    items[4].style.color = 'red';
    }else{
    if (!regs.information.exec(this.value)){
    items[4].innerHTML = '请输入正确的身份证';
    items[4].style.color = 'red'
    }else{
    items[4].innerHTML = '身份证正确';
    items[4].style.color = 'green';
    chek_information = true;
    }
    }

    }

    // 邮箱
    var email = document.getElementById('email');
    email.onfocus = function (){
    items[5].innerHTML = '请输入邮箱';
    items[5].style.color = 'red';
    }
    email.onblur = function (){
    if(this.value==''){
    items[5].innerHTML = '邮箱不能为空';
    items[5].style.color = 'red';
    }else{
    if (!regs.email.exec(this.value)){
    items[5].innerHTML = '请输入正确的邮箱';
    items[5].style.color = 'red'
    }else{
    items[5].innerHTML = '邮箱正确';
    items[5].style.color = 'green';
    chek_email = true;
    }
    }

    }

    // 手机号
    var telephone = document.getElementById('telephone');
    telephone.onfocus = function (){
    items[6].innerHTML = '请输入手机号';
    items[6].style.color = 'red';
    }
    telephone.onblur = function (){
    if(this.value==''){
    items[6].innerHTML = '手机号不能为空';
    items[6].style.color = 'red';
    }else{
    if (!regs.telephone.exec(this.value)){
    items[6].innerHTML = '请输入正确的手机号';
    items[6].style.color = 'red'
    }else{
    items[6].innerHTML = '手机号正确';
    items[6].style.color = 'green';
    chek_telephone = true;
    }
    }

    }

    // 提交注册内容,前提是所有内容均校验通过
    var handup = document.getElementById('handup');
    handup.onclick = function (){
    if(chekAccount && chekPassword && chek_chek_password && chek_username && chek_information && chek_email && chek_telephone){
    alert('数据都校验通过,可以提交');
    }else{
    alert('请输入正确的内容');
    }
    }



  • 相关阅读:
    ROS和H3C,华为的端口汇聚方式
    wifi6 802.11ax技术标准 值得期待但无需等待!
    免信用卡更改Apple ID地区
    pip install失败报错解决方案
    黑产-起底身份倒卖产业:那些被公开叫卖的人生
    黄金
    jupyter nootbook本地使用指南
    current account(经常账户)
    outlier异常值检验原理和处理方法
    随机逻辑回归random logistic regression-特征筛选
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/14258480.html
Copyright © 2011-2022 走看看