JavaScript一个简单的验证页面

简介: <p></p><pre name="code" class="javascript"><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">至少学一门前台,一门后台。</span></pre> <p>最近自学JavaScript

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">至少学一门前台,一门后台。</span>

最近自学JavaScript,现将一些学习实践分享给大家,本人自学小白,望大神勿喷,有什么好的想法,欢迎指教。

页面要求:


知识点掌握:

1、var myname=document.myform.myname.value;获取输入框中的内容;

2、var strP=/^\d+(\.\d+)?$/;
//不是数字,返回false
if(!strP.test(Num))
return false;
return true;

正则表达式判断是否为数字;

3、函数的嵌套调用;

4、<!--

//-->

方法对javascript代码进行封装,如果浏览器不支持JS,则将其隐藏,现在使用 的浏览器一般都支持javascript,所以貌似可以忽略。

源码奉上:

<html>
<title>我的验证页面</title>
<head>
<script language="JavaScript">
<!--
function isNum(Num){
//num不存在,返回false
	if(!Num)
		return false;
	var strP=/^\d+(\.\d+)?$/;
//不是数字,返回false
	if(!strP.test(Num))
		return false;
	return true;
}
function cheform(){
	//check name
	var myname=document.myform.myname.value;
	if(myname==""){
	alert("姓名不允许为空");
	return false;
	}
	//check age
	var myage=document.myform.myage.value;
	if(!isNum(myage)){
	alert("年龄必须为数字");
	return false;
	}
	//check pwd
	var pwd=document.myform.mypwd.value;
	var pwd1=document.myform.mypwd1.value;
	if(pwd.length!=6){
		alert("密码必须是6位");
		return false;
	}
	if(pwd1!=pwd){
		alert("两次密码输入不一致");
		return false;
	}
}
//-->
</script>
</head>
<body>
	<form name="myform" onsubmit="return cheform()">
	请输入姓名:<input name="myname" type="text">不允许空值<br>
	请输入年龄:<input name="myage" type="text">必须是阿拉伯数字<br>
	请输入密码:<input name="mypwd" type="password">必须是6位<br>
	请重复密码:<input name="mypwd1" type="password">必须和上面一致<br>
	备注:<textarea name="myremark" type="textarea"></textarea><br>
	<input name="sub" type="submit" value="提交">
	</form>
</body>
</html>


目录
相关文章
|
2月前
|
存储 安全 API
Next.js 实战 (九):使用 next-auth 完成第三方身份登录验证
这篇文章介绍了next-auth,一个为Next.js设计的身份验证库,支持多种认证方式,如电子邮件和密码、OAuth2.0提供商(如Google、GitHub、Facebook等)以及自定义提供商。文章包含了如何配置Github Provider以及会话管理,并提到了适配器Adapters在next-auth中的作用。最后,文章强调了next-auth的强大功能值得进一步探索。
100 10
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
15天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
46 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
19天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
37 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
133 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
57 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
6月前
|
移动开发 JavaScript 前端开发
JavaScript:验证输入
【9月更文挑战第02天】
70 6
|
6月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
178 2
前端JS读取文件内容并展示到页面上
|
5月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
157 4
|
5月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
153 2

热门文章

最新文章