目录
一、js的自定义对象
1、自定义的对象
1）定义一个对象，符号函数定义的格式
2）创建对象:var 变量名 = new 对象（实际参数列表）；
1）类似于java中的有参构造
定义一个person对象 创建一个Person对象
例：
<script>
//定义一个对象
function Person（name，age）{
this.name = name;
this.age = age;
this.speakEnglish = function(){
alert("说英语")；
}
}
//创建一个对象
var p = new Person("张三"，18)；
//for-in
for(var i in p){
document.writer(p[i]+" ");
}
</script>2）类似于java中的无参构造
定义对象 创建对象
例：
<script>
//定义一个对象
function Person(){}
//创建对象
var p = new Person();
//通过对象名追加
p.name = "李四"；
p.age = 19;
p.speakEnglish = function(mag){
alert("会说"+mag);
}
</script>3）利用js模板对象Object -- 内置对象，代表所有js内置对象的模板
直接创建new Object（）；
例：
<script>
//创建对象
var p = new Object();
p.name = "王五"；
p.age = 20;
p.speck = function(mag){
alect("会说"+mag)；
}
</script>4）字面量值“json格式”
例：
<script>
var p = { //p:json对象 json对象.key获取 value
"id":1,
"name":"高圆圆",
"age":42,
"address":"西安市",
"gender":"女",
"speak":function (msg) {
alert("会话"+msg) ;
}
}
</script>获取值
<script>
document.write("学号是:"+p.id+"<br/>") ;
document.write("姓名是:"+p.name+"<br/>") ;
document.write("年龄是:"+p.age+"<br/>") ;
document.write("地址是:"+p.address+"<br/>") ;
document.write("性别是:"+p.gender+"<br/>") ;
p.speak("日语") ;
</script>二、正则表达式
1、什么是正则表达式
能够用浏览器（js）引擎进行解析
限定用户输入数据的一种约束
2、常用语法
1）X字符
X字符：X代表字符
2）数量词相关的语法
X+ ：表示X字符出现一次或多次
X？：表示字符出现零次或一次
X* ：表示字符出现零次或多次
3）范围相关
\w 等价于[A-Za-z0-9_]: 任意的大小写字母或数字字符
X{n,} 表示至少n次
X{n} 表示恰好出现n次
X{n，m} X字符串出现n次，不超过m次
4）正则表达式
var 变量名 = /正则语法/；
变量名.test(被校验的字符串) 返回true，匹配成功，否则覅配失败
5）弊端
var 变量名 = /正则语法/； 弊端：不完全匹配，只要字符串中某个字符串满足条件就通过
如果需要进行完全匹配,需要在正则语法的前后加上边界匹配器
^:以xxx指定的内容开头
$:以xxx指定的内容结尾
var str = "asdf12abc" ;
//定义正则
var pattern = /^[0-9]{2}$/ ;
if(pattern.test(str)){
alert("条件成立") ;
}else{
alert("条件不成立") ;
}三、js原生表单校验
1、需求
用户名:8-16位的数字或者字母
密码:6-16位的数字字母组成
确认密码和密码一致
邮箱符合邮箱格式:
数字或字母@数字字母.(com/.com.cn/)
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的原生表单校验</title>
<style>
#formDiv{
border: 1px solid #000;
width: 420px;
height: 240px;
margin: 150px 0 0 400px;
}
#userDiv{
margin: 30px 0 0 60px;
}
#pwdDiv{
margin: 10px 0 0 60px;
}
#repwdDiv{
margin: 10px 0 0 60px;
}
#emailDiv{
margin: 10px 0 0 60px;
}
#btnDiv{
margin: 10px 0 0 80px;
}
</style>
</head>
<body>
<div id="formDiv">
<!--
表单是否能够提交取决于当前onsbumit事件(绑定一个函数:将所有的表单项都必须校验)的返回值如果true,表示能够提交
否则false,不能提交
-->
<!-- <h3>GET方式提交</h3>-->
<div>
<h3>Post方式提交</h3>
</div>
<!--action:servlet后台地址-->
<form action="http://localhost:8080/Web_02/args" method="post" onsubmit="return checkAll()">
<div id="userDiv">
用户名:<input type="text" name="username" id="username" onblur="checkUserName()" placeholder="请输入用户名"><span id="userTip"></span>
</div>
<div id="pwdDiv">
密  码:<input type="password" name="password" onblur="checkPassword()" id="password" placeholder="请输入密码"><span id="pwdTip"></span>
</div>
<div id="repwdDiv">
确认密码:<input type="password" name="repwd" id="repwd" onblur="checkRePassword()" placeholder="请输入密码"><span id="repwdTip"></span>
</div>
<div id="emailDiv">
邮箱:<input type="text" name="email" id="email" onblur="checkEmail()" placeholder="请输入邮箱"><span id="emailTip"></span>
</div>
<div id="btnDiv">
<input type="submit" value="注册"><input type="button" style="margin-left: 30px" value="登录">
</div>
</form>
</div>
<hr/>
<script>
//校验用户名:
function checkUserName(){
//通过 id="username"获取当前用户名所在的文本框的标签对象并获取它的内容
var username = document.getElementById("username").value ;
//密码:6-16位的数字字母组成
//定义正则表达式
var reg = /^[A-Za-z0-9_]{6,16}$/ ;
//获取id="userTip"的span标签对象
var spanTip = document.getElementById("userTip") ;
//校验用户名
if(reg.test(username)){
//成立
spanTip.innerHTML = "恭喜您,可用".fontcolor("green") ;
return true ;
}else{
//不成立
spanTip.innerHTML = "×".fontcolor("red") ;
return false ;
}
}
//校验用户名:
function checkPassword(){
//通过 id="password"获取当前密码所在的文本框的标签对象并获取它的内容
var password = document.getElementById("password").value ;
//用户名:8-16位的数字或者字母
//定义正则表达式
var reg = /^[A-Za-z0-9_]{8,16}$/ ;
//获取id="pwdTip"的span标签对象
var spanTip = document.getElementById("pwdTip") ;
//校验用户名
if(reg.test(password)){
//成立
spanTip.innerHTML = "√".fontcolor("green") ;
return true ;
}else{
//不成立
spanTip.innerHTML = "×".fontcolor("red") ;
return false ;
}
}
//确认密码和密码一致
function checkRePassword() {
//通过 id="password"获取当前密码所在的文本框的标签对象并获取它的内容
var password = document.getElementById("password").value ;
//获取当前确认密码框的内容id="repwd"
var repassword = document.getElementById("repwd").value;
//获取span标签对象
// id="repwdTip"
var spanTip = document.getElementById("repwdTip");
if(repassword==password){
spanTip.innerHTML="√".fontcolor("green") ;
return true ;
}else{
spanTip.innerHTML = "×".fontcolor("red") ;
return false ;
}
}
//校验邮箱
function checkEmail() {
// id="email"的输入的内容
var email = document.getElementById("email").value ;
// 邮箱符合邮箱格式:
//数字或字母@数字字母.(com/.com.cn/.ISTone/)
//纯QQ邮箱 数字@qq.com
//本身字符:就是.----转义 \.
var reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[A-Za-z]{2,3}){1,2}$/ ;
//获取id="emailTip"的span标签对象
var spanTip = document.getElementById("emailTip");
//校验
if(reg.test(email)){
spanTip.innerHTML="√".fontcolor("green") ;
return true ;
}else{
spanTip.innerHTML="×".fontcolor("red") ;
return false ;
}
}
//表单能否提交
function checkAll() {
//将所有的表单项都必须满足规则
if(checkUserName() && checkPassword() && checkRePassword() && checkEmail()){
return true ;
}else{
return false ;
}
}
</script>
</body>
</html>3、表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--get提交-->
<form method="get" action="http://localhost:8080/Web_02/resolve">
用户名:<input type="text" name="username" /><br/>
密码:<input type="password" name="password"/><br/>
<input type="submit" value="提交" />
</form>
<hr/>
<!--post提交-->
<form method="post" action="http://localhost:8080/Web_02/resolve">
用户名:<input type="text" name="username" /><br/>
密码:<input type="password" name="password"/><br/>
<input type="submit" value="提交" />
</form>
</body>
</html>
扫一扫
4242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
