使用setCustomValidity更改input表单的valueMissing
<form>
<input id="text" type="text" required />
<input id="submin" type="submit" />
</form>
如果text中没有输入内容,点击提交按钮,会提示“请填写此字段
事件顺序如下:
(1)submit按钮的click事件,若取消默认事件,则终止
(2)html5表单验证和提示,若表单验证不通过,则提示第一个不合法输入,并终止
(3)form表单的submit事件,若取消默认事件,则终止
注意:
用js触发form的submit事件,会直接进入第(3)步,不会进行html5表单验证。
所以,要想出现html5的验证提示,必须经过submit按钮。
注意
用js触发form的submit事件,会直接进入第(3)步,不会进行html5表单验证。
所以,要想出现html5的验证提示,必须经过submit按钮。
var text = document.querySelector('#text')
document.querySelector('#submin').addEventListener('click', () => {
text.validity.valueMissing ? ftext.setCustomValidity('输入不能为空') : text.setCustomValidity('');
//或者
if (text.checkValidity() === false) {
text.setCustomValidity('输入不能为空')
}
}
form表单
- autocomplete关闭智能提示
- novalidate关闭验证
- datalist筛选数据,有自己的id值,配合list属性使用
<input type="text" value="" name="txtList" list="url_list" />
<datalist id="url_list">
<option value="https://www.baidu.com">百度</option>
<option value="https://www.baidu.com">谷歌</option>
<option value="https://www.baidu.com">优酷</option>
<option value="https://www.baidu.com">快播</option>
</datalist>
- form不在form表单里进行提交,跟id绑定
<form action="" method="get" id="fm">
<input type="text" value="" name="txt" autofocus placeholder="请输入名字" required/>
<input type="submit" value="提交" id="sm" />
</form>
<input type="text" value="" name="name" form="fm"/>
form属性在表单标签中写,值就设置于form中的id值,该input就可以提交了
datalist绑定到输入域
<input type="text" value="" name="txtList" list="url_list" />
<datalist id="url_list">
<option value="https://www.baidu.com">百度</option>
<option value="https://www.baidu.com">谷歌</option>
<option value="https://www.baidu.com">优酷</option>
<option value="https://www.baidu.com">快播</option>
</datalist>
datalist标签需要有自己的id值,然后配合list属性来使用,才可以有数据列表的效果
contains方法来判断元素包含关系
var result=document.getElementById(id).classList.contains("test")
console.log(result)
contains方法可以判断A元素是否包含B元素,返回布尔值
dataset获取自定义属性(自己添加的属性就叫自定义属性)
<div id="dv" data-name="帅哥" data-job="前端"></div>
var dt=document.querySelector("#dv").dataset;
console.log(dt.name);
// 通过代码为标签添加自定义属性
dt.age="25";
文件读取
通过FileReader对象可以读取本地存储的文件,使用 File 对象来指定所要读取的文件或数据。用户可以通过选择文件按钮或者拖移上传文件
<input type="file" id="file"/>
//读取文件,获取上传文件标签的这个对象
var f1 = document.querySelector("#file");
//上传文件的触发事件--(只要上传文件就会触发该事件)
f1.onchange=function () {
console.log(this.files[0], 'this')
//可以获取上传的文件
var fl1=this.files[0];
//读取文件,创建读取文件的对象
var fReader=new FileReader();
//读取文件
fReader.readAsText(fl1);
//开始读取文件的加载的事件
fReader.onload=function () {
//css的代码最终是可以在style标签写的
var style=document.createElement("style");
//获取的读取的结果
var result=fReader.result;
style.innerHTML=result;
document.querySelector("head").appendChild(style);
};
};
- 属性
- FileReader 接口有3个用来读取文件方法返回结果在result中
readAsBinaryString ---将文件读取为二进制编码
readAsText ---将文件读取为文本
readAsDataURL ---将文件读取为DataURL - FileReader 提供的事件模型
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
- FileReader 接口有3个用来读取文件方法返回结果在result中
网络检测
var state = window.navigator.onLine;
if (state) {
alert("在线的");
} else {
alert("不在线"); //回去自己试试
}
// ononline联网触发,onoffline掉线触发
window.ononline = function () {
alert("连接上了");
};
window.onoffline = function () {
alert("掉线了")
};
获取当前地理位置
- 获取当前地理信息 navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
- 获取实时地理信息 navigator.geolocation.watchPosition(successCallback, errorCallback) 当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象。 获取地理信息失败后,会调用errorCallback,并返回一个包含错误信息的对象。
window.navigator.geolocation.getCurrentPosition(success, error)
// 定位成功
function success (msg) {
console.log(msg.coords.latitude)
console.log(msg.coords.longitude)
}
- 属性
position.coords.latitude纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
/#放在草稿箱快两个月,一直想增加内容也没得时间,发布出来作为个人激励吧。