注册交单的校验

2023-10-29 13:50
文章标签 校验 注册 交单

本文主要是介绍注册交单的校验,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <!--需求:表单校验
 思路:1 写好表单框架
     2 用js分别写好每个表单功能的校验的方法,
  3 把所有的方法封装到一起
  -->
 
 <script type="text/javascript">
  //性提高代码的复用
  function check(name,id,regex,truecode,falsecode){
   var flag=false;
   var val =document.getElementsByName(name)[0].value;
   var spannode=document.getElementById(id);
   if(regex.test(val)){
    spannode.innerHTML=truecode.fontcolor("green");
    flag=true;
   }else{
    spannode.innerHTML=falsecode.fontcolor("red");
   }
   return flag;
  }
  //校验用户名
  function checkuser(){
   var useregex =new RegExp("^[a-zA-Z]{4}$");
   return check("usename","userspan",useregex,"用户名正确","用户名错误");
  }
  //校验密码
  function checkpsw(){
   var pswregex=new RegExp("^[0-9]{4}$");
   return check("psw","pswspan",pswregex,"密码正确","密码错误");
  }
  //校验确认密码
  function checkpsw2(){
   var psw2flag=false;
   var psw2name=document.getElementsByName("psw2")[0];
   var pswname=document.getElementsByName("psw")[0];
   var psw2val=psw2name.value;
   var pswval=pswname.value;
   var psw2spannode=document.getElementById("psw2span");
   if(psw2val==pswval){
    psw2spannode.innerHTML="确认密码正确".fontcolor("green");
    psw2flag=true;
   }else{
    psw2spannode.innerHTML="确认密码错误".fontcolor("red");
   }
   return psw2flag;
  }
  //校验性别
  function checksex(){
   var sexflag=false;
   var sexnode=document.getElementsByName("sex");
   for(var x=0;x<sexnode.length;x++){
    if(sexnode[x].checked){
     sexflag=true;
     break;
    }
   }
   if(!sexflag){
    var sexspannode=document.getElementById("sexspan");
    sexspannode.innerHTML="请选择性别".fontcolor("red");
   }
   return sexflag;
  }
  //校验下拉菜单
  function checkselect(){
   var selectflag=false;
   var menunode =document.getElementsByName("country")[0];
   var menu_options=menunode.options;
   var menuspannode=document.getElementById("menuspan");
   if(menu_options[menunode.selectedIndex].value=="none"){
    menuspannode.innerHTML="请选择国家".fontcolor("red");
   }else{
    selectflag=true;
   }
   return selectflag;
  }
  //校验表单
  function checkform(){
   if(checkuser()&&checkpsw()&&checkpsw2()&&checksex()&&checkselect()){
    return true;
   }else{
    return false;
   }
  }
 </script>
 
 <form id="formid" οnsubmit="return checkform()">
  用户名称:<input type="text" name="usename" οnblur="checkuser()"/><span id="userspan"></span><br/>
  输入密码:<input type="password" name="psw" οnblur="checkpsw()"/><span id="pswspan"></span><br/>
  确认密码:<input type="password" name="psw2" οnblur="checkpsw2()"/><span id="psw2span"></span><br/>
  选择性别:<input type="radio" name="sex" value="nan"/>男 <input type="radio" name="sex" value="nv"/>女<span id="sexspan"></span><br/>
  选择国家:<select name="country" οnchange="checkselect()">
   <option value="none">选择国家</option>
   <option value="cn">中国</option>
   <option value="en">英国</option>
  </select><span id="menuspan"></span><br/>
  <input type="submit" value="提交"/><input type="reset" value="重置"/>
  <!-- <input type="button" value="提交按钮" οnclick="checkform()"/> -->
 </form>
</body>
</html>

转载于:https://my.oschina.net/u/1589656/blog/263587

这篇关于注册交单的校验的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/301070

相关文章

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm

SpringValidation数据校验之约束注解与分组校验方式

《SpringValidation数据校验之约束注解与分组校验方式》本文将深入探讨SpringValidation的核心功能,帮助开发者掌握约束注解的使用技巧和分组校验的高级应用,从而构建更加健壮和可... 目录引言一、Spring Validation基础架构1.1 jsR-380标准与Spring整合1

SpringBoot利用@Validated注解优雅实现参数校验

《SpringBoot利用@Validated注解优雅实现参数校验》在开发Web应用时,用户输入的合法性校验是保障系统稳定性的基础,​SpringBoot的@Validated注解提供了一种更优雅的解... 目录​一、为什么需要参数校验二、Validated 的核心用法​1. 基础校验2. php分组校验3

Java进行文件格式校验的方案详解

《Java进行文件格式校验的方案详解》这篇文章主要为大家详细介绍了Java中进行文件格式校验的相关方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、背景异常现象原因排查用户的无心之过二、解决方案Magandroidic Number判断主流检测库对比Tika的使用区分zip

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

Java中使用注解校验手机号格式的详细指南

《Java中使用注解校验手机号格式的详细指南》在现代的Web应用开发中,数据校验是一个非常重要的环节,本文将详细介绍如何在Java中使用注解对手机号格式进行校验,感兴趣的小伙伴可以了解下... 目录1. 引言2. 数据校验的重要性3. Java中的数据校验框架4. 使用注解校验手机号格式4.1 @NotBl

Go路由注册方法详解

《Go路由注册方法详解》Go语言中,http.NewServeMux()和http.HandleFunc()是两种不同的路由注册方式,前者创建独立的ServeMux实例,适合模块化和分层路由,灵活性高... 目录Go路由注册方法1. 路由注册的方式2. 路由器的独立性3. 灵活性4. 启动服务器的方式5.

Spring常见错误之Web嵌套对象校验失效解决办法

《Spring常见错误之Web嵌套对象校验失效解决办法》:本文主要介绍Spring常见错误之Web嵌套对象校验失效解决的相关资料,通过在Phone对象上添加@Valid注解,问题得以解决,需要的朋... 目录问题复现案例解析问题修正总结  问题复现当开发一个学籍管理系统时,我们会提供了一个 API 接口去

spring 参数校验Validation示例详解

《spring参数校验Validation示例详解》Spring提供了Validation工具类来实现对客户端传来的请求参数的有效校验,本文给大家介绍spring参数校验Validation示例详... 目录前言一、Validation常见的校验注解二、Validation的简单应用三、分组校验四、自定义校

Spring 源码解读:自定义实现Bean定义的注册与解析

引言 在Spring框架中,Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义,Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制,帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry,以全面掌握Bean注册和解析的核心原理。