当前位置: 首页 > news >正文

js实现注册表单验证

js实现注册表单验证

验证用户名必须为:要求6-20位,只能有大小写字母和数字,并且大小写字母和数字都要有

var name_re=/[0-9a-zA-Z]{3,8}/;
var pwd_re=/^\S{6,20}$/;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>js实现注册表单验证</title>
</head>
<body>
<form id="test-register" action="#" onsubmit="return checkRegisterForm()">
    <p id="test-error" style="color:red"></p>
    <p>
        用户名: <input type="text" id="username" name="username">
    </p>
    <p>
        密码: <input type="password" id="password" name="password">
    </p>
    <p>
        确认密码: <input type="password" id="password2">
    </p>
    <p>
        <button type="submit">提交</button> <button type="reset">重置</button>
    </p>
</form>
<script>
	// 用户名必须是3-8位英文字母或数字;
	// 口令必须是6-20位;
	// 两次输入口令必须一致
	function checkRegisterForm(){
		var username = document.getElementById("username");
		var password = document.getElementById("password");
		var password2 = document.getElementById("password2");
		var testerror = document.getElementById("test-error");
		var name_re=/^\S[0-9a-zA-Z]{3,8}/;
		var pwd_re=/^\S{6,20}$/;
		if(name_re.test(username.value)&&pwd_re.test(password.value)&&password.value===password2.value){
			alert("提交成功!");
		}
		if(!name_re.test(username.value)){
			alert("用户名必须是3-10位英文字母或数字");
		}
		if(!pwd_re.test(password.value)){
			alert("密码必须是6-20位");
			console.log("password="+password.value+"password2="+password2.value);
		}else{
			alert("密码符合 要求")
		}
		if(password.value!==password2.value){
			alert("密码输入不一致");
		}
	}
</script>
</body>
</html>

 

相关文章:

  • Sybase中给表增加字段
  • 修改Sybase字段类型
  • MyBatis中转义字符
  • Sybase删除字段
  • jsp页面中的ajax中的返回值
  • onclick中实现两个方法
  • jsp中URL
  • Win10隐藏桌面回收站
  • idea2020版本一直卡在reading maven projects
  • Win10中实时网速显示
  • spring boot中控制台打印sql日志
  • Java中添加日期
  • IDEA Pycharm  Webstorm通过ctrl+滚轮缩放字体大小
  • Springmvc页面跳转触发指定页面中指定按钮
  • 数据仓库历史数据存储-拉链表
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • CEF与代理
  • download使用浅析
  • extract-text-webpack-plugin用法
  • Hibernate【inverse和cascade属性】知识要点
  • mysql_config not found
  • Vim 折腾记
  • webgl (原生)基础入门指南【一】
  • 从重复到重用
  • 高程读书笔记 第六章 面向对象程序设计
  • 理解 C# 泛型接口中的协变与逆变(抗变)
  • 判断客户端类型,Android,iOS,PC
  • 使用Tinker来调试Laravel应用程序的数据以及使用Tinker一些总结
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • python最赚钱的4个方向,你最心动的是哪个?
  • SAP CRM里Lead通过工作流自动创建Opportunity的原理讲解 ...
  • 说说我为什么看好Spring Cloud Alibaba
  • #define 用法
  • (16)UiBot:智能化软件机器人(以头歌抓取课程数据为例)
  • (2)nginx 安装、启停
  • (6)设计一个TimeMap
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (差分)胡桃爱原石
  • (附源码)计算机毕业设计SSM基于java的云顶博客系统
  • (六)c52学习之旅-独立按键
  • (十七)devops持续集成开发——使用jenkins流水线pipeline方式发布一个微服务项目
  • (算法)Game
  • (一)基于IDEA的JAVA基础10
  • (一)认识微服务
  • (一)使用IDEA创建Maven项目和Maven使用入门(配图详解)
  • (转)Android学习系列(31)--App自动化之使用Ant编译项目多渠道打包
  • (转)树状数组
  • .NET 6 Mysql Canal (CDC 增量同步,捕获变更数据) 案例版
  • .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  • .NET Core中的去虚
  • .net网站发布-允许更新此预编译站点
  • 。Net下Windows服务程序开发疑惑
  • [Android]Android P(9) WIFI学习笔记 - 扫描 (1)
  • [C#]winform利用seetaface6实现C#人脸检测活体检测口罩检测年龄预测性别判断眼睛状态检测