一、js基本数据类型和typeof
1、
- null：空、无。表示不存在，当为对象的属性赋值为null，表示删除该属性
- undefined：未定义。当声明变量却没有赋值时会显示该值。可以为变量赋值为undefined
- number：数值。最原始的数据类型，表达式计算的载体
- string：字符串。最抽象的数据类型，信息传播的载体
- boolean：布尔值。最机械的数据类型，逻辑运算的载体
- object：对象。面向对象的基础
2、typeof:
alert(typeof 1); // 返回字符串"number"
alert(typeof "1"); // 返回字符串"string"
alert(typeof true); // 返回字符串"boolean"
alert(typeof {}); // 返回字符串"object"
alert(typeof []); // 返回字符串"object "
alert(typeof function(){}); // 返回字符串"function"
alert(typeof null); // 返回字符串"object"
alert(typeof undefined); // 返回字符串"undefined"
二、正则表达式
1、语法
/正则表达式主体/修饰符(可选)
2、使用字符串方法
正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
3、
search() 方法使用正则表达式
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var str="Visit Runoob!";
var n=str.search(/Runoob/i);
document.getElementById("demo").innerHTML=n;
}
</script>
search() 方法使用字符串
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var str ="Visit Runoob";
var n=str.search("Runoob");
document.getElementById("demo").innerHTML=n;
}
</script>
4、replace() 方法使用正则表达式
<button onclick="myFunction()">点击</button>
<p id="demo">请访问 microsoft</p>
<script type="text/javascript">
function myFunction(){
var str =document.getElementById("demo").innerHTML;
var txt =str.replace(/microsoft/i,"Runoob");
document.getElementById("demo").innerHTML=txt;
}
</script>
replace() 方法使用字符串
<script type="text/javascript">
function muFunction(){
var str =document.getElementById("demo").innerHTML;
var str =str.replace("microsoft","runoob");
document.getElementById("demo").innerHTML=txt;
}
</script>
5、正则表达式修饰符
6、正则表达式模式
7、test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
<script type="text/javascript">
var patt1 =new RegExp("e");
document.write(patt1.test("The best things in life are free"));
</script>
8、exec() 方法用于检索字符串中的正则表达式的匹配。
<script type="text/javascript">
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
</script>
三、JavaScript 表单
1、JavaScript 表单验证
<form name="myForm" action="#" onsubmit="return validateForm()" method="post">
名字：<input type="text" name="fname">
<input type="submit" name="" value="提交">
</form>
<script type="text/javascript">
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if(x==null||x==""){
alert("需要输入名字。");
return false;
}
}
</script>
2、JavaScript 验证输入的数字
<p>请输入1-10的数字</p>
<input type="" name="" id="numb">
<button type="button" onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x,text;
x=document.getElementById("numb").value;
if(isNaN(x)||x<1||x>10){
text="输入错误";
}
else{
text="输入正确";
}
document.getElementById("demo").innerHTML=text;
}
</script>
3、HTML 表单自动验证
<form action="#" method="post">
<input type="text" name="fname" required="">
<input type="submit" name="" value="提交">
</form>
四、JavaScript 表单验证
1、必填（或必选）项目
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓:<input type="text" name="fname">
<input type="submit" value="提交">
</form>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("姓必须填写");
return false;
}
}
</script>
2、E-mail 验证
<form name="myForm" action="#" onsubmit="return validateForm();" method="post">
Email:<input type="text" name="email">
<input type="submit" name="" value="提交">
</form>
<script type="text/javascript">
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if(atpos<1||dotpos<atpos+2>=x.length){
alert("不是一个有效的e-mail地址");
return false;
}
}
</script>
五、JavaScript 验证 API
1、约束验证 DOM 方法
<input type="number" name="" min="100" max="300" required id="id1">
<button onclick="myFunction()">验证</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var inpObj = document.getElementById("id1");
if(inpObj.checkValidity()==false){
document.getElementById("demo").innerHTML=inpObj.validationMessage;
}
else{
document.getElementById("demo").innerHTML="输入正确";
}
}
</script>
2、约束验证 DOM 属性
3、Validity 属性
<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 ( input 的 min 属性), 会显示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
var inpObj = document.getElementById("id1");
if(!isNumeric(inpObj.value)) {
txt = "你输入的不是数字";
} else if (inpObj.validity.rangeUnderflow) {
txt = "输入的值太小了";
} else {
txt = "输入正确";
}
document.getElementById("demo").innerHTML = txt;
}
// 判断输入是否为数字
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
网友评论