参考慕课网示例：

使用js对html输入框内容进行校验：

1. 只能输入5-20个字符，必须以“字母”开头

2. 可以带“数字" “_” “.”的字串

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

body, form, input {

    margin: 0;

    padding: 0;

    font-size: 12px

}

body {

    margin-left: 50px

}

form {

    height: 30px;

    line-height: 30px

}

.text {

    height: 20px;

    vertical-align: middle

}

.btn {

    height: 24px;

    width: 50px;

    vertical-align: middle;

    border: 1px solid #333;

    background: #ccc;

}

</style>

</head>

<script type="text/javascript">

window.onload=function(){

    var oBtn=document.getElementById("submitBtn");

    var oInput=document.getElementById('name');

    oBtn.onclick=function(){

        alert(oInput.value);

        var re = /^[a-zA-Z]{1}[\w\_\.]{4,9}$/g;//5-10个字符，字母开头

        if(re.test(oInput.value)==false){

            alert("× 格式错误！")

        }

        else{

            alert("√ 格式正确！")

        }

    }

}

</script>

<body>

    <h3>要求：</h3>

    <p>1. 只能输入5-20个字符，必须以“字母”开头</p>

    <p>2. 可以带“数字" “_” “.”的字串</p>

    <br />

    <form>

        <label>用户名：<input id="name" class="text" type="text" /></label> <input

            id="submitBtn" class="btn" type="button" value="验证" />

    </form>

</body>

</html>

js使用正则表达式的更多相关文章

  1. js常用正则表达式2

    字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界. -或- 对 ...

  2. js之正则表达式（上）

    1.正则表达式的创建方式 两种方式创建:通过new修饰符创建和字面量的方式创建 1>new修饰符方式创建 var b2=new RegExp('Box','ig'); //第二个参数是 模式字符 ...

  3. Js用正则表达式验证字符串

    js 常用正则表达式表单验证代码 作者: 字体:[增加 减小] 类型:转载 js 常用正则表达式表单验证代码,以后大家就可以直接使用了. 正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模 ...

  4. AngularJS进阶(十三)JS利用正则表达式校验手机号

    JS利用正则表达式校验手机号 注:请点击此处进行充电! 绪 由于项目需求,需要在前端实现手机号码的校验.当然了,对于基本的格式校验应该放在客户端进行,而不需要再将待校验的手机号发送至服务端,在服务端完 ...

  5. JS常用正则表达式备忘录

    摘要: 玩转正则表达式. 原文:JS常用正则表达式备忘录 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正则表达式或"regex"用于匹配字符串的各个部分 下面是 ...

  6. JS的正则表达式及回文

    function palindrome(str) { str = str.replace(/\s/g,"").replace(/[^a-zA-Z0-9]/g,"" ...

  7. JS的正则表达式简介

    1.JS的正则表达式 1.1 简介 JS的正则表达式比较简单,总体上只分为两个功能:一个是test——用于匹配字符串是否符合规定的正则表达式规则:另外一个是exec——用于获取匹配到的数据. 1.2 ...

  8. Js与正则表达式

    原本接着上面的章节,这一章节应该是写 Jquery事件的,由工作需要,暂时横插一篇正则表达式的学习,这里是边学边记录,错误之处,希望指正,提拔一二,不甚感激! 此章节有 1.1 正则表达式的定义 1. ...

  9. JS 利用正则表达式替换字符串

    JS 利用正则表达式替换字符串 博客分类: JavaScript 学习资料 Java代码 收藏代码 JS 利用正则表达式替换字符串 var data = "123123,213,12312, ...

  10. js常用正则表达式，滚蛋吧！你们测试组bug，让你挑

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. FFPEG 转码记录------解决了有流，但是没有码率和FPS？

    命令行:(已经测试成功) ffmpeg -i rtmp://localhost/live/S0000_8 -c:v libx264 -b:v 500k -c:a libfdk_aac -b:a 64k ...

  2. DZY Loves Chessboard

    DescriptionDZY loves chessboard, and he enjoys playing with it. He has a chessboard of n rows and m ...

  3. jQuery插件开发全解析，类级别与对象级别开发

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  4. 这个算asp.net的一个bug吗？

    asp.net设置按钮Enabled="false"后OnClientClick中添加的验证脚本消失了 下面的确可以 <asp:Button ID="btnRegi ...

  5. hiho_1139_二分+bfs搜索

    题目 给定N个点和M条边,从点1出发,到达点T.寻找路径上边的个数小于等于K的路径,求出所有满足条件的路径中最长边长度的最小值. 题目链接:二分     最小化最大值,考虑采用二分搜索.对所有的边长进 ...

  6. 【转载】PHP运行模式的深入理解

    PHP运行模式的深入理解 作者: 字体:[增加 减小] 类型:转载 时间:2013-06-03我要评论 本篇文章是对PHP运行模式进行了详细的分析介绍,需要的朋友参考下   PHP运行模式有4钟:1) ...

  7. 黑盒测试在App自动化测试中的应用

    黑盒测试在App自动化测试中的应用 不废话,直接来. 先说说什么是黑盒测试 黑盒测试,这里就说的是app功能测试,之前看到一个介绍说,就是在测试中,把测试对象看作一个黑盒子.利用黑盒测试法进行动态测试 ...

  8. php数据通信方式

    一:curl$ch = curl_init();curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false);curl_setopt($ch,CURLOPT_TIMEOU ...

  9. python2 urllib 笔记

    python2 urllib 笔记 import urllib base='http://httpbin.org/' ip=base+'ip' r=urllib.urlopen(ip) print r ...

  10. android浮动搜索框

    android浮动搜索框的配置比较繁琐,需要配置好xml文件才能实现onSearchRequest()方法. 1.配置搜索的XML配置文件​,新建文件searchable.xml,保存在res/xml ...