JavaScript个人学习记录总结（二）——验证表单输入之模式匹配
该示例检查从文本窗口部件中获取姓名和电话号码这两个表单数据的有效性。当文本框中的值发生变化时，即引发一个change事件，从而可以调用一个函数来检查这两个输入值的格式是否正确。
validator.html源代码如下
<!DOCTYPE html>
<html>
<head>
<title>validator.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="validator.js"></script>
</head>
<body>
<h3>Customer Infomation</h3>
<form action="">
<p>
<label>
<input type="text" id="custName"/>name(last name,first name,middle initial)
</label>
<br/><br/>
<label>
<input type="text" id="phone"/>phone number(ddd-ddd-dddd)
</label>
<br/><br/>
<input type="reset" id="reset"/>
<input type="submit" id="submit"/>
</p>
</form>
<script type="text/javascript" src="validatorr.js"></script>
</body>
</html>
validator.js源代码如下：
function chkName(){
var myName=document.getElementById("custName");
var pos=myName.value.search(/^[A-Z][a-z]+,?[A-Z][a-z]+,?[A-Z]\.?$/);
if(pos!=0){
alert("The name you entered ("+myName.value+") is not in the correct form. \n"+
"The correct form is:"+"last-name,first-name,middle-initial \n"+
"Please go back and fix your name");
return false;
}else{
return true;
}
}
function chkPhone(){
var myPhone=document.getElementById("phone");
var pos=myPhone.value.serch(/^\d{3}-\d{3}-\d{4}$/);
if(pos!=0){
alert("The phone number you entered ("+myPhone.value+") is not in the correct form. \n"+
"The correct form is:ddd-ddd-dddd \n"+
"Please go back and fix your phone number");
return false;
}else{
return true;
}
}
validatorr.js源代码如下：
document.getElementById("custName").onchange=chkName;
document.getElementById("phone").onchange=chkPhone;
程序界面如下：
JavaScript个人学习记录总结（二）——验证表单输入之模式匹配的更多相关文章
- ng2 学习笔记（二）表单及表单验证
在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...
- 前端MVC Vue2学习总结（五）——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- jquery-mobile 学习笔记之二（表单创建）
绪上 一.注意事项 1. <form> 元素必须设置 method 和 action 属性 2. 每一个表单元素必须设置唯一的 "id" 属性. 该 id 在网站的页面 ...
- html学习记录之表格、表单基础
①编码:charset="utf-8": ②描述及关键词:name="description":name="keywords": ③a标签 ...
- JavaScript---通过正则表达式验证表单输入
验证输入的name只能是数字或字母或下划线 js <script type="text/javascript"> function submitOn(){ var f ...
- Go-Web编程_表单_0x02_验证表单的输入
开发Web的一个原则就是,不能信任用户输入的任何信息,所以验证和过滤用户的输入信息就变得非常重要,我们经常会在微博.新闻中听到某某网站被入侵了,存在什么漏洞,这些大多是因为网站对于用户输入的信息没有做 ...
- angular学习笔记(二十)-表单验证
本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...
- Lua和C++交互 学习记录之二：栈操作
主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3 参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...
随机推荐
- IP数据报的格式
1. IP数据报首部的固定部分中的各字段 ①版本:占4位,指IP协议的版本.通信双方使用的 IP协议版本必须一致.日前广泛使用的 IP协议版本号为 4 (即 IPv4). IPv6 目前还处于起步阶段 ...
- Program B--CodeForces 492B
Description Vanya walks late at night along a straight street of length l, lit by n lanterns. Consid ...
- Hadoop中常用的InputFormat、OutputFormat（转）
Hadoop中的Map Reduce框架依赖InputFormat提供数据,依赖OutputFormat输出数据,每一个Map Reduce程序都离不开它们.Hadoop提供了一系列InputForm ...
- goldengate 12c对teradata的支持
OGG12c在2014.4.24发布了对TD的最新支持版本,软件可在此下载:https://edelivery.oracle.com.新版本特性如下: 当前支持TD 14.1的捕获和交付,仍然基于Te ...
- mybatis 的 resulttype 和resultMap
resultType适合返回值比较简单的,比如一个数据类型,或者一个对象.比如对象的情况,是将表的列名和对象的属性一一对应的. 但是resultType无法处理返回值比较复杂的,特别是连接查询,需要用 ...
- PHP Array 函数
PHP Array 简介 array 函数允许您对数组进行操作. PHP 支持单维和多维的数组.同时提供了用数据库查询结果来构造数组的函数. 安装 array 函数是 PHP 核心的组成部分.无需安装 ...
- android studio只能全部提示设置
- js库之art.dialog
自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切 ...
- powershell命令大全
Name Category Synopsis ---- -------- -------- ac Alias Add-Content asnp Alias Add-PSSnapin clc Alias ...
- iOS log第三方库之间的对比