webBasic_javaScript_day02_正则_onsubmit_eval_函数
2018-03-17 15:27
351 查看
正则
正则书写规则
. 除了换行符以外所有字符 \w 字母,数字,下划线,汉字 \s 任意空白字符 \d 数字 ^ 字符串的开始边界 $ 字符串的结束边界
js中创建正则对象
1. 直接创建 var reg=/正则表达式/模式; g:匹配全局模式 i:忽略大小写 2. 对象创建 var reg=new RegExp(正则表达式,模式); g:匹配全局模式/找到第一个匹配的字符串之后,依然会继续向后查找
正则对象的方法
var str="you can you up,no can no bi bi"; var reg=/no/g;//正则表达式no,全局模式 //从str中找出与reg匹配的子字符串 console.log(reg.exec(str)); console.log(reg.exec(str)); //str中有没有符合reg的子串,返回boolean reg.test(str);
总结1:如果不是全局模式,每次运行reg.exec(str)都会去匹配第一个符合要求的子串,如果是全局模式,第n次执行,去找第n个匹配的子串
var reg=new RegExp("\\s\\d");
var str=" 1";
console.log(reg.test(str));总结2:如果使用new的方式创建正则对象
一定要注意,构造函数中的参数是一个字符串
这里写正则表达式,需要转义
字符串对象支持正则验证的方法
str.replce(reg,new_str);返回,把str中和reg能够匹配子串替换成新的字符串
str.match(reg);
返回str中和reg匹配的子串
str.search(reg);
返回str中和reg匹配的子串的索引
总结:
str.match(reg)返回str中所有匹配的子串数组
reg.exec(str)每执行一次返回str中匹配的一个子串
完善登录框的form表单验证
<body>
<div class="container">
<div class="form fr">
<h4>
登录学子商城
<a href="#">新用户注册</a>
</h4>
<form action="">
<div class="input">
<input type="text"
placeholder="请输入您的用户名"
id="user" onblur="check_name();">
<p id="msg">5-10数字,字母,下划线</p>
<span class="name_icon"></span>
</div>
<div class="input">
<input type="password"
placeholder="请输入您的密码"
id="pwd" onblur="check_pwd();">
<span class="pwd_icon"></span>
</div>
<div class="check">
<input type="checkbox" class="fl" id="c1">
<label for="c1" class="fl">自动登录</label>
<a href="#" class="fr">忘记密码?</a>
</div>
<!-- 提交按钮 -->
<input type="submit" value="登录" id="btn">
</form>
</div>
</div>
</body>
<style type="text/css">
.content{
width: 100%;
}
.container{
width: 100%;
height: 560px;
background-image: url(../images/regist.png);
background-repeat: no-repeat;
/* 会失真 */
/* background-size:100% 100%; */
background-size:cover;
}
.form{
width: 260px;
height: 280px;
/* 本控件透明0.5 */
/* 本控件所有子元素也透明0.5 */
/* opacity:0.5; */
background-color: rgba(0,0,0,0.4);
margin: 140px;
}
.fl{
float: left;
}
.fr{
float: right;
}
.container .form h4 {
color: #fff;
font-size: 18px;
font-weight: normal;
border-bottom: 1px solid #fff;
padding: 15px 0px;
margin: 8px;
}
.container .form h4 a{
color: #fff;
font-size: 12px;
text-decoration: none;
float: right;
margin-top: 6px;
}
/* 文本框的样式 */
.container .form .input{
/* 因为子标签span要定位 */
position: relative;
}
.container .form .input input{
height: 16px;
width:226px;
margin-top: 20px;
padding: 5px;
margin-left: 10px;
}
.container .form .input span{
display: block;
width: 28px;
height: 28px;
position: absolute;
top: 21px;
right: 14px;
}
.name_icon{
background-image:url("../images/login/yhm.png");
}
.pwd_icon{
background-image: url("../images/login/mm.png");
}
p{
color: #fff;
font-size: 12px;
margin-top: 5px;
margin-left: 10px;
}
.container .form .check label{
color: #fff;font-size: 12px;
}
.container .form .check a{
color: #fff;font-size: 12px;
text-decoration: none;
}
.check {
height: 30px;
margin-top: 25px;
margin-left: 10px;
}
.container .form>form>input{
height: 35px;
color: #fff;
width: 100%;
border-radius:3px;
background: -webkit-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
border: none;
}
.ok{
color: green;
}
.error{
color: red;
}
</style>
<script type="text/javascript">
function check_name(){
//1.获取文本框中的值--->string
var code=document
.getElementById("user").value;
//2.获得正则表达式对象
var reg=/^\w{5,10}$/;
var oP=document.getElementById("msg");
//3.判断文本和正则是否匹配
if(reg.test(code)){
//4.true:p的样式名 ok
oP.className="ok";
}else{
//5.false:p的样式名 error
oP.className="error";
}
}
function check_pwd(){
//1.获取文本框中的值--->string
var code=document
.getElementById("pwd").value;
//2.获得正则表达式对象
var reg=/^\w{5,10}$/;
var oP=document.getElementById("msg");
//3.判断文本和正则是否匹配
if(reg.test(code)){
//4.true:p的样式名 ok
oP.className="ok";
}else{
//5.false:p的样式名 error
oP.className="error";
}
}
</script>onsubmit事件的处理方案
添加返回值,正确返回true,错误返回false
function check_name(){
//1.获取文本框中的值--->string
var code=document
.getElementById("user").value;
//2.获得正则表达式对象
var reg=/^\w{5,10}$/;
var oP=document.getElementById("msg");
//3.判断文本和正则是否匹配
if(reg.test(code)){
//4.true:p的样式名 ok
oP.className="ok";
return true;
}else{
/
4000
/5.false:p的样式名 error
oP.className="error";
return false;
}
}** form表单中添加onsubmit事件
<form action="" onsubmit="return check_name()+check_pwd()==2;">
所有的事件都可以使用return false取消
function对象
方法中不写返回值,默认的返回值是undefined
函数的参数列表
function doSm(){
return arguments[0];
}
console.log(doSm(1,2,3));定义函数的时候,无论有没有参数,有多少个参数
在函数被调用的时候,可以写任意个数的参数
js通过arguments数组都可以读到
js中的函数没有重载
模拟重载
在js调用函数的过程中,只检查函数名,不检查参数列表
如果函数名称匹配,则直接调用该函数
在目标函数中,使用arguments访问传递过来的参数列表
js中没有函数的重载,如果出现了相同函数名的两个函数,后一个有效
eval
eval函数用于计算表达式字符串(“1+2”),或者js代码的字符串(“alert(‘123’)”),把他们运行.
<body>
<input type="text" id="num">
<input type="button" value="="
onclick="cal();">
</body>
<script type="text/javascript">
function cal(){
//1.获得文本框的值
var input=document.getElementById("num");
var str=input.value;
//2.使用eval函数执行文本框的str
try{
//在使用eval时,在参数字符串前后加上括号
// "("+str+")"
var value=eval("("+str+")");
input.value=value;
}catch(e){
input.value="输入有误";
}
}
</script>使用new的方式创建function对象(了解即可)
<script type="text/javascript">
function Person(){//类似于java中创建一个类
this.name="zhangsan";
this.age=15;
this.play=function(){
alert("我在敲代码");
}
}
var p=new Person();
console.log(p.name);
p.play();
</script>匿名方法
在一个方法只被调用一次,以后不会再被调用的情况下,使用匿名方法/匿名函数
数组的排序方法中,比较规则使用匿名函数
外部对象
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript form onsubmit中的return 后面跟一个函数，其中return 起什么作用
- 对JavaScript的eval()中使用函数的进一步讨论
- javascript 中eval 函数
- 实现JavaScript中eval()函数的功能
- Javascript之Eval函数解析(转贴)
- Javascript中eval()函数的作用
- 【JavaScript】javascript的eval函数实现的一个简单计算器
- javascript正则表达式函数详解 .
- java ScriptEngine 使用 （支持JavaScript脚本，eval()函数等） - *（00）*
- javascript(js)使用eval方法加密过的函数解密方法
- JavaScript之eval函数
- onclick、onsubmit、submit集合函数之间的关系和区别
- java ScriptEngine 使用 （支持JavaScript脚本，eval()函数等）
- javascript之eval()函数
- JavaScript eval() 函数
- 在Javascript中Eval函数的使用eval()函数
- JavaScript中Eval()函数的作用
- $.post()的dataType类型参数与Javascript的eval()函数
- [Javascript] String.replace 正则表达式及替换函数使用 $ 字符