iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js实现表单校验功能
  • 160
分享到

js实现表单校验功能

2024-04-02 19:04:59 160人浏览 泡泡鱼
摘要

本文实例为大家分享了js实现表单校验功能的具体代码,供大家参考,具体内容如下 1、所用到的三个事件: onfocus(焦点聚焦事件)、onblur(焦点离开事件)、onkeyup(按

本文实例为大家分享了js实现表单校验功能的具体代码,供大家参考,具体内容如下

1、所用到的三个事件:

onfocus(焦点聚焦事件)、onblur(焦点离开事件)、onkeyup(按键抬起的事件)

2、利用事件触发函数,函数中执行校验的信息。

3、利用checkform判断表单中的内容是否规范,如果规范submit按钮可以提交表单信息。

简单效果:

 

 

 

fORM中的代码:


<form action="demo.html" onsubmit="return checkForm()">
      <div>
      <div class="text">
           <p>用户名</p>
           <input id="value" onfocus="shoeTips('hint','用户名长度不能小于六')" onblur="hint_hide()" onkeyup="hint()" type="text" Name="Userame" placeholder="用户名" />
           <span id="hint"></span>
          </div>
         <div class="text">
           <p>密码</p>
           <input id="pass_value" onfocus="shoeTips('pass_hint','密码长度不能小于六')" onblur="pass_hide()" onkeyup="checkPass()" type="passWord" name="password" placeholder="密码" />
            <span id="pass_hint"></span>
            </div>
            <div class="text">
              <p>确认密码</p>
              <input id="passpass_value" onfocus="shoeTips('passpass_hint','两次密码要一致')" onblur="passpass_hide()" onkeyup="checkPassPass()" type="password" name="password" placeholder="确认密码" />
              <span id="passpass_hint"></span>
           </div>
           <div class="text">
                    <p>邮箱</p>
                    <input id="email" onfocus="shoeTips('email_hint','邮箱格式要正确')" onblur="emailHide()" onkeyup="emailCheck()" type="email" name="email" placeholder="邮箱" />
                    <span id="email_hint"></span>
                </div>
                <div class="text">
                    <p>手机号</p>
                    <input id="phone" type="text" onfocus="shoeTips('phone_hint','格式为十一位数字的手机号')" onblur="phoneHide()" onkeyup="phoneCheck()" Name="Phone" placeholder="手机号">
                    <span id="phone_hint"></span>
                </div>
                <div class="submit">
             <input type="submit" value="提交" />
         </div>
    </div>
</form>

js中的:


function shoeTips(spanId, tips) {
 var span = document.getElementById(spanId);
 span.innerHTML = tips;
}

function hint() {
 var value = document.getElementById("value").value;
 var hint = document.getElementById("hint");
 if(value.length < 6) {
  hint.innerHTML = "用户名太短";
  return false;
 } else {
  hint.innerHTML = "用户名合格";
  return true;
 }
}
 
function hint_hide() {
 var hint = document.getElementById("hint");
 hint.innerHTML = "";
}

 
function checkPass() {
 var value = document.getElementById("pass_value").value;
 var hint = document.getElementById("pass_hint");
 if(value.length < 6) {
  hint.innerHTML = "密码太短";
  return false;
 } else {
  hint.innerHTML = "密码格式合格";
  return true;
 }
}
 
function pass_hide() {
 var hint = document.getElementById("pass_hint");
 hint.innerHTML = "";
}

function checkPassPass() {
 var papavalue = document.getElementById("passpass_value").value;
 var value = document.getElementById("pass_value").value;
 var papahint = document.getElementById("passpass_hint");
 if(papavalue != value) {
  papahint.innerHTML = "两次密码不一致";
  return false;
 } else {
  papahint.innerHTML = "";
  return true;
 }
}
 
function passpass_hide() {
 var papahint = document.getElementById("passpass_hint");
 papahint.innerHTML = "";
}

function checkEmail(strEmail) 
{      
    var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    if ( emailReg.test(strEmail) ) {
        return true;
    }
    else {
//      alert("您输入的Email地址格式不正确!");
        return false;
    }
};
function emailCheck() {
 var emailValue = document.getElementById("email").value;
 var email_hint = document.getElementById("email_hint");
 var flag = checkEmail(emailValue);
 if(flag) {
  email_hint.innerHTML = "邮箱格式正确";
  return true;
 } else {
  email_hint.innerHTML = "邮箱格式错误";
  return false;
 }
}
 
function emailHide() {
 var email_hint = document.getElementById("email_hint");
 email_hint.innerHTML = "";
}

function checkMobile( strMobile )
{ //13588888888
    var regu = /^[1][345678][0-9]{9}$/;
    var re = new RegExp(regu);
    if (re.test(strMobile)) {
        return true;
    }
    else {
        return false;
    }
};
function phoneCheck() {
 var phone = document.getElementById("phone").value;
 var phone_hint = document.getElementById("phone_hint");
 var flag = checkMobile(phone);
 if(flag) {
  phone_hint.innerHTML = "手机号格式正确";
  return true;
 } else {
  phone_hint.innerHTML = "手机号格式错误";
  return false;
 }
}
 
function phoneHide() {
 var phone_hint = document.getElementById("phone_hint");
 phone_hint.innerHTML = "";
}
 
function checkForm() {
 var flag = emailCheck() && checkPass() && checkPassPass() && hint() && phoneCheck();
 return flag;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: js实现表单校验功能

本文链接: https://www.lsjlt.com/news/132987.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js实现表单校验功能
    本文实例为大家分享了js实现表单校验功能的具体代码,供大家参考,具体内容如下 1、所用到的三个事件: onfocus(焦点聚焦事件)、onblur(焦点离开事件)、onkeyup(按...
    99+
    2024-04-02
  • JS实现注册界面表单校验
    本文实例为大家分享了JS实现注册界面表单校验的具体代码,供大家参考,具体内容如下 设计效果: 源码: <!DOCTYPE html> <html>     ...
    99+
    2024-04-02
  • js实现注册页面校验功能
    本文实例为大家分享了js实现注册页面的校验代码,供大家参考,具体内容如下 基本操作 document.getElementById():获取页面元素alert():向页面弹出提示框。...
    99+
    2024-04-02
  • js如何仿网易实现表单验证功能
    这篇文章主要介绍了js如何仿网易实现表单验证功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。来图镇楼!html代码:<!DOCTYP...
    99+
    2024-04-02
  • vue实现表单验证功能
    本篇主要讲述如何基于NUXT的validate方法实现表单的验证。 将验证方法封装后,使用的时候只需像:rules="filter_rules({required:true,type...
    99+
    2024-04-02
  • jQuery实现表单验证功能
    jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证 如下图 别忘了引入jQuery框架!!! 话不多说直接先上jQuery部分代码: <script type...
    99+
    2024-04-02
  • 基于Vue+elementUI如何实现动态表单的校验功能
    小编给大家分享一下基于Vue+elementUI如何实现动态表单的校验功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言开发...
    99+
    2024-04-02
  • JavaScript如何实现用户名和密码表单校验功能
    这篇文章主要介绍“JavaScript如何实现用户名和密码表单校验功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript如何实现用户名和密码表单校验功能”文章能帮助大家解决问题。代码...
    99+
    2023-07-04
  • vue 如何实现表单校验
    一、安装并使用 首先,在你的vue项目中进行安装: npm install --save vue-input-check 安装完成以后引入并注册: import in...
    99+
    2024-04-02
  • vue实现表单验证小功能
    本文实例为大家分享了vue实现表单验证的具体代码,供大家参考,具体内容如下 1.路由跳转 先点开Vue项目中src目录配置router文件然后用import暴露你的表单页名称并在你的...
    99+
    2024-04-02
  • 如何使用JavaScript进行表单校验功能
    这篇文章主要介绍如何使用JavaScript进行表单校验功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!文本框校验以下是文本框的校验步骤。1.获取待校验的文本框value值,2.对...
    99+
    2024-04-02
  • js前端表单数据处理和校验怎么实现
    这篇文章主要介绍了js前端表单数据处理和校验怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇js前端表单数据处理和校验怎么实现文章都会有所收获,下面我们一起来看看吧。1.数据处理当表单在视图所展示的数据并...
    99+
    2023-07-02
  • element多个表单校验的实现
    在项目中,经常会遇到表单检验,单个表单检验可查看element的官网文档,里面有详细的介绍。在这里我分享在实际项目中遇到多个表单同时进行校验以及我的解决方法,欢迎大家留言,一起探讨相...
    99+
    2024-04-02
  • js前端表单数据处理表单数据校验
    目录前言1.数据处理1.1 场景1 :过滤我不要的数据1.2 场景2:只提取我要的数据1.3 场景3 :覆盖数据1.4 场景4 :字段映射1.5 场景5 : 数据映射1.6 场景6:...
    99+
    2024-04-02
  • SpringMVC实现表单验证功能详解
    本章节内容很丰富,主要有基本的表单操作,数据的格式化,数据的校验,以及提示信息的国际化等实用技能。首先看效果图项目结构图接下来用代码重点学习SpringMVC的表单操作,数据格式化,数据校验以及错误提示信息国际化。请读者将重点放在UserC...
    99+
    2023-05-30
    spring springmvc 表单验证
  • Vue3实现登录表单验证功能
    目录一.实现思路与效果图二.实现具体过程三.完整代码与效果图一.实现思路与效果图 使用async-validator 插件,阿里出品的 antd 和 ElementUI 组件库中表单...
    99+
    2024-04-02
  • JSP页面实现验证码校验功能
    目录验证码校验分析生成验证码测试验证码校验验证码测试验证码校验添加验证码刷新在网页页面的使用中为防止“非人类”的大量操作和防止一些的信息冗余,增加验证码校验是...
    99+
    2022-11-13
    JSP验证码 JSP验证码校验 JSP页面验证码
  • AngularJS怎么实现表单验证功能
    这篇文章给大家分享的是有关AngularJS怎么实现表单验证功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下:在AngularJS的管辖下,每个表单form都会创建一个...
    99+
    2024-04-02
  • Ajax如何实现表单验证功能
    本篇内容主要讲解“Ajax如何实现表单验证功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Ajax如何实现表单验证功能”吧! 兼...
    99+
    2024-04-02
  • SpringBoot数据校验功能的实现
    1.pom.xml <xml version="1.0" encoding="UTF-8"> <project xmlns="http://maven.apache...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作