一: 正则表达式
1,:普通形式和构造函数形式;
1,1普通形式; 语法
var reg = / 表达式 / 附加参数
表达:需要匹配的
附加参数:用来扩展表达式的含义
g:代表进行全局匹配 i:代表不区分大小写 m:代表可以进行多行匹配
1,2构造函数形式
var reg = new RegExp("表达式","附加参数");
普通参数必须是一个常量的,构造参数可以是一个变量的
2,表达式模式
2,1简单模式:普通字符组成的表达模式
var reg = /changsha/; var reg =/chang/;
简单模式只能进行具体的匹配
2,2复合模式:含有通配符来匹配
var reg =/^ \w + $/
2,3 RegExp对象
格式:正则表达式对象实例.test();
exec() 正则匹配 test() 检索指定值
2,4 String对象的方法
match 匹配 search 检索 replace 替换 split 分割
2,5 正则表达式常用的匹配符号
常用符号
/../代表开始和结束 ^ 匹配开始 $匹配结束 \s任何空白字符 \S任何非空白字符 \d数字 \D非数字 \w 数字,字母,下划线 \W 非 数字,字母,下划线 . 换行符之外的任意字符
重复符号
{n} 出现n次 {n,}出现n次以上 {n,m}出现n次到m次之间 + 一次或多次 * 0次或多次 ? 0次或一次
二: 辅助效
1, 下拉款实现级联效果
javaScript也拥有面向对象语言的,标签也可以是一个对象
下拉框对象
select对象的 常用 事件,方法 和 属性
事件;
onchange 当改变选项时调用
方法;
add()向下拉框添加一个属性
属性;
options[] 返回下拉框中的选项 selectIndex 设置被选下拉框的索引 length 设置下拉框中选项的数组
options[]集合返回的是select的option中的一个数组
重点:
options.length=0,select对象中所有的选项都会被清除
selectIndex和lengt属性的应用
<html> <head> <script type="text/JavaScript"> function fun(){ var index = document.getElementById("fruit").selectedIndex; var len = document.getElementById("fruit").length; //alert(index); var show = document.getElementById("iner"); show.innerHTML="被选中的索引:"+index+"<br/>下拉处的索引:"+len; } </script> </head> <body> <form action="" Method="post"> <select id="fruit" onchange="fun()"> <option value="apple">苹果</option> <option value="orange">橘子</option> <option value="bananer">香蕉</option> <option value="pineapple">菠萝</option> <option value="peach">挑</option> </select> <div id="iner"></div> </form> </body> </html>
效果;
add()方法:在select中添加一个option标签
例子:使用onchange判断省份,再创建城市
关键代码;
<form action="" Method="post"> <select id="SelPro" onchange="fun()"> <option>--选择省份--</option> <option value="湖北省">湖北省</option> <option value="湖南省">湖南省</option> </select> <select id="SelCity"> <option>--选择城市--</option> </select> </form>
js的add方法添加城市
<script type="text/JavaScript"> function fun(){ var SelPro = document.getElementById("SelPro").value; //获取省份的值 var city = document.getElementById("SelCity"); city.options.length=0;//清除SelCity的选中记录 switch(SelPro){ case "湖北省": city.add(new Option("武汉","武汉"),null); city.add(new Option("荆州","荆州"),null); city.add(new Option("十堰","十堰"),null); break; case "湖北省": city.add(new option("长沙","长沙"),null); city.add(new option("吉首","吉首"),null); city.add(new option("湘潭","湘潭"),null); break; } } </script>
运行效果;
三: 数组; js数组基础;
四: 数组实现省级级联效果
a,使用for循环遍历数组
var array = new Array(); //JavaScript的遍历方式与Oracle的遍历方式相似 for(var i in array){ //输出数组 alert(i); }
b,省市级联效果的思路
1),在html中创建两个下拉框,选中省的时候会对应市的下拉框,使用onchange事件 2)创建数组表示省份和城市 cityList 3),在fun()函数中获得省份的名称,然后在数组中取出相应的城市添加到下拉框中,并且将options.length=0; 4),页面加载时要将省份名称和城市名称添加到下拉框中
代码实现;
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=gbk"/> <script type="text/JavaScript"> var cityList= new Array();//使用数组来保存省份和城市 cityList['湖南省'] = ['长沙','湘潭','吉首']; cityList['湖北省'] = ['武汉','荆州','十堰']; function fun(){ var province = document.getElementById("SelPro").value; //获取省份的值 var city = document.getElementById("SelCity"); city.options.length=0;//清除SelCity的选中记录 // for(var str in cityList){ //alert(str); //} //获得城市 for(var i in cityList){ if( i == province){ for(var j in cityList[i]){ city.add(new Option(cityList[i][j]),null); } } } } //页面加载时获得省份 function allcity(){ var province = document.getElementById("SelPro"); for(var i in cityList){ province.add(new Option(i),null); } } window.onload=allcity; </script> </head> <body> <form action="" Method="post"> <select id="SelPro" onchange="fun()"> <option>选择省份--</option> </select> <select id="SelCity" style="width:100px"> <option>--选择城市--</option> </select> </form> </body> </html>
运行效果;
相关推荐
正则表达式和表单辅助特效
在北大青鸟S2学期的第六章中,我们聚焦于Web开发中的一个重要环节:表单验证的事件和辅助特效。这一章的知识点涵盖了如何通过JavaScript和CSS来优化和增强用户在网页上的交互体验,确保数据的准确性和一致性,以及...
【E正则小助手源码分享-易语言】是一份基于易语言开发的正则表达式辅助工具的源代码分享。易语言是一种简洁易学的编程语言,它以中文编程为特色,旨在降低编程门槛,让更多人能参与到软件开发中。这份源码的发布,...
3. **_VB_RegExp正则表达式.ec**:这可能是一个正则表达式库,用于在易语言中实现字符串匹配和处理。在播放器中,正则表达式可能用于解析媒体文件路径、验证输入或者处理配置文件等场景。 4. **s6g006Yo.ec**:该...
2. **正则表达式**:在验证过程中,正则表达式(Regex)常用于检查输入数据的格式。例如,验证邮箱地址时,会用到匹配邮箱格式的正则表达式;验证手机号码时,也会有特定的正则表达式来确认其合法性。 3. **事件...
7. **第7章 正则表达式和表单辅助特效** - 正则表达式:学习正则表达式的构造和模式匹配,用于验证和提取文本。 - 表单辅助特效:使用JavaScript实现表单验证提示、实时输入检查和表单提交确认等增强用户体验的...
JavaScript提供了丰富的内置函数和正则表达式支持,可以方便地实现这些验证。此外,AJAX异步请求也能帮助实现不刷新页面的后台验证。 页面特效制作则涉及DOM(Document Object Model)操作,通过改变HTML元素的样式...
1. 邮箱格式验证:使用正则表达式检查输入的邮箱地址是否符合标准格式。 2. 密码强度验证:检查密码长度,要求包含数字、字母、特殊字符等,提高账户安全性。 3. 用户名唯一性:通过Ajax异步请求,向服务器查询...
/pattern/.test(value)) {...}` 使用正则表达式验证格式,如邮箱、电话号码等。 4. **数字验证**:`if (isNaN(value)) {...}` 或 `if (!/^-?\d+(\.\d+)?$/.test(value)) {...}` 检查是否为数字。 5. **日期格式**:`...
这可以通过监听表单事件和正则表达式验证实现。 8. **粒子特效**:一些网站背景会使用粒子动画,增加视觉吸引力。这些通常是通过自定义JavaScript库,如`particles.js`实现的。 9. **3D特效**:借助WebGL库,如...
这通常涉及到对输入字段的`oninput`事件进行监听,以及使用正则表达式验证输入内容是否符合要求。 总的来说,"基于AXUI登录和注册界面切换特效源码"项目展示了如何结合HTML、CSS和JavaScript,以及AXUI框架,创建一...
13. **表单验证**:通过JavaScript验证用户输入,例如检查邮箱格式、手机号码合法性等,使用正则表达式和表单事件。 14. **响应式布局**:根据设备屏幕尺寸调整网页布局,JavaScript可以辅助CSS媒体查询实现更复杂...
这个压缩包“JavaScript实例(1470个)”显然包含了大量的JS代码示例,覆盖了各种常见的前端特效和功能实现。 在JavaScript的世界里,实例是将抽象的概念转化为具体代码的过程,这些实例可能是用于创建动态效果、...
// 正则表达式和评分规则 // ... return strengthScore; } function updateStrengthUI(strength) { // 更新界面元素,如进度条、提示文字 // ... } }); ``` ### 6. 其他相关资源 在提供的压缩包中,`index...
**jQuery表单验证实例详解** 在网页开发中,表单验证是必不可少的一部分,它能确保用户输入的数据符合预设的规则,从而提高数据质量和用户体验。...同时,了解和掌握相关的正则表达式也是提升开发技能的关键。
为了二次修改和扩展功能,你需要理解JavaScript的字符串处理方法,如`split()`、`join()`和`slice()`等,以及正则表达式的基础知识。此外,熟悉jQuery的选择器、事件处理和插件机制也至关重要。在理解了现有代码的...
2. **正则表达式辅助**:提供 `String.substitute` 将字符串中的占位符替换为提供的值。 六、Ajax 1. **Ajax 请求**:`Ajax.Request` 和 `Ajax.Updater` 分别用于发起异步请求和更新页面部分。 2. **JSON 支持**...
开发者通常会使用正则表达式或者事件监听(如oninput事件)来实现这一功能,当用户输入不符合规则的字符时,要么阻止输入,要么自动转换为正确格式。 接着,日历选择显示是另一种增强用户交互的方式。它通常以弹出...
- **正则表达式**:介绍如何使用正则表达式进行字符串匹配和处理。 - **CSS基础知识**:介绍CSS的基本语法,如选择器、属性值等,以及如何使用CSS美化网页。 - **AJAX技术**:介绍如何使用AJAX实现网页的异步加载,...