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 ...
随机推荐
- Java并发编程（二）线程任务的中断（interrupt）
使用interrupt()中断线程 当一个线程运行时,另一个线程可以调用对应的Thread对象的interrupt()方法来中断它,该方法只是在目标线程中设置一个标志,表示它已经被中断,并立即返回. ...
- xcode6中如何添加pch文件
在Xcode6之前,新建一个工程的时候,系统会帮我们自动新建一个以工程名为名字的pch (precompile header)文件,在开发过程中,可以将那些整个工程都广泛使用的头文件包含在该文件下,编 ...
- _x、__x、__x__含义与区别
_x是一种弱表示,它用在类中的属性或方法,表示是private属性,希望外部使用者不要直接调用它.但它只是暗示,没有任何限制性措施. private属性主要推荐的还是这种方式,因为Python的设计理 ...
- android baseApplication 基类
package com.free.csdn.base; import java.io.File;import java.util.ArrayList;import java.util.List; im ...
- SharePoint 2013 搜索体系结构
博客地址:http://blog.csdn.net/FoxDave 本文参考自微软官方的Chart,记录一下,算是自己对这部分知识的总结. Microsoft® SharePoint® Server ...
- ODI 12c 安装
软件下载地址: http://www.oracle.com/technetwork/middleware/data-integrator/downloads/index.html 下载这个版本: Or ...
- eclipse安装spring和hibernate插件经验
看网上的教程有时候不一定凑效,我是自己摸索的(看过尚硅谷的SSH视频),很多时候会安装不成功(或者安装结果与视频讲述不一致),但是安装过后,查看eclispe插件,会发现已经安装了(springIDE ...
- .a包生成64位
./configure CC="/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain ...
- C#使用指针表达式
如何:获取指针变量的值 使用指针间接运算符可获取位于指针所指向的位置的变量. 表达式采用下面的形式,其中, p 是指针类型: *p; 不能对除指针类型以外的任何类型的表达式使用一元间接寻址运算符. 此 ...
- Smart210学习记录------块设备
转自:http://bbs.chinaunix.net/thread-2017377-1-1.html 本章的目的用尽可能最简单的方法写出一个能用的块设备驱动.所谓的能用,是指我们可以对这个驱动生成的 ...