该示例检查从文本窗口部件中获取姓名和电话号码这两个表单数据的有效性。当文本框中的值发生变化时，即引发一个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个人学习记录总结（二）——验证表单输入之模式匹配的更多相关文章

  1. ng2 学习笔记（二）表单及表单验证

    在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...

  2. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  3. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  4. jquery-mobile 学习笔记之二（表单创建）

    绪上 一.注意事项 1. <form> 元素必须设置 method 和 action 属性 2. 每一个表单元素必须设置唯一的 "id" 属性. 该 id 在网站的页面 ...

  5. html学习记录之表格、表单基础

    ①编码:charset="utf-8": ​②描述及关键词:name="description":name="keywords": ③a标签 ...

  6. JavaScript---通过正则表达式验证表单输入

    验证输入的name只能是数字或字母或下划线 js <script type="text/javascript"> function submitOn(){ var f ...

  7. Go-Web编程_表单_0x02_验证表单的输入

    开发Web的一个原则就是,不能信任用户输入的任何信息,所以验证和过滤用户的输入信息就变得非常重要,我们经常会在微博.新闻中听到某某网站被入侵了,存在什么漏洞,这些大多是因为网站对于用户输入的信息没有做 ...

  8. angular学习笔记(二十)-表单验证

    本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...

  9. Lua和C++交互 学习记录之二：栈操作

    主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3  参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...

随机推荐

  1. C++-多重继承的注意点

    1, 钻石型多重继承如果不想要底部的类有重复的变量,则需要声明为virtual继承 class File{...}; class InputFile: virtual public File{..}; ...

  2. CSU1022

    题目: blue和AutoGerk是好朋友.他们的相同点是都喜欢研究算法,不同点是AutoGerk已是大牛而blue还是菜鸟.blue经常拿一些自以为很难的问题去问AutoGerk,想难倒他,但是每次 ...

  3. [vijos P1626] 爱在心中

    做完Victoria的舞会3,挑了vijos里强连通分量里面难度值最低的题目,也就是这道.先把第一小问做了,纯Tarjan,只是我学的时候的标程是用邻接表的,这题数据小于是用了邻接矩阵,两者之间的切换 ...

  4. vue js 用nodejs的依赖包 --2016-08-23

     今天被nodejs包依赖坑了一下,上次上传的项目突然运行不起来了,原来是package.json中定义了使用最新版本的依赖,而最新版本有可能调整了结构或者改了api,比如vux把flexbox-it ...

  5. 交互式的Flash图表和仪表控件AnyChart

    AnyChart使你可以创建出绚丽的交互式的Flash图表和仪表控件.是一款灵活的基于Adobe Flash和跨浏览器和跨平台的图表解决方案,被很多知名大公司所使用,可以用于仪表盘的创建.报表.数据分 ...

  6. Android google map 两点之间的距离

    在Android google map中,有时候会碰到计算两地的距离,下面的辅助类就可以帮助你计算距离: public class DistanceHelper { /** Names for the ...

  7. 在T-SQL中访问远程数据库（openrowset、opendatasource、openquery）

    1.  启用Ad Hoc Distributed Queries 在使用openrowset/opendatasource前要先启用Ad Hoc Distributed Queries服务,因为这个服 ...

  8. 关于Xcode调试的帖子，感觉不错，转来看看

    http://www.raywenderlich.com/10209/my-app-crashed-now-what-part-1 http://www.raywenderlich.com/10505 ...

  9. hdu1394

    //Accepted 292 KB 46 ms //利用线段树求逆序数 //对于每个数看前面比他大的数有多少个,更新这个数的个数 #include <cstdio> #include &l ...

  10. 团队博客——Sprint计划会议1

    每日Scrum:第一天 会议时间:4.14.晚八点半 会议地点:基础教学楼一楼大厅 小组成员:郭庆樑,林彦汝,张金 认领人—使团队成员分工合作,保持团队的积极性. ID 名称(NAME) 重要性(IM ...