Input框不能为空
required="required"将这个写到input标签中就为空时那么就会出现红框。
input不可编辑不可传值
disabled 不可编辑可传值
readonly 可选择,可以接收焦点，还可以选中或拷贝其文本。后台会接收到传值
unselectable="on"Input文件多选属性
multiple="multiple"全选问题，input为循环出来的
<script type="text/javascript">
var inpu = $('input[type=checkbox]');
console.log(inpu);
function invert() {
//反选函数
for (var i = 0; i < inpu.length; i++) {
if (inpu[i].checked == false) {
inpu[i].checked = true;
} else {
inpu[i].checked = false;
}
}
}
//全选函数
function check() {
for (var i = 0; i < inpu.length; i++) {
inpu[i].checked = true;
}
}
//全不选函数
function uncheck() {
for (var i = 0; i < inpu.length; i++) {
inpu[i].checked = false;
}
}
</script>
Input框只能为数字
如果输入文字敲回车，会直接输入字母
onkeyup = "value=value.replace(/[^\d]/g,'')"使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直
onchange = "value=value.replace(/[^\d]/g,'')"使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输入时就做出响应
oninput = "value=value.replace(/[^\d]/g,'')"使用 oninput 事件，完美的解决了以上两种问题，测试暂时还没有出现其它问题。
当你输入文字的时候那么就为空输不进去他就要结合
placeholder="请输入纯数字"
他俩要一起用
type="number"用input类型，只能输入数字。
input只能输入文字
<input type="text" placeholder="请输入姓名" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">
input的提示
1.提示当点击input框的时候提示消失然后当刷新页面就会重新出来
value="请输入备注消息" οnfοcus="javascript:if(this.value=='请输入备注消息')this.value='';"
2.提示信息当你input框为空时就会有提示输入信息是就会消失，输入在清空还会存在。
placeholder="项目名称"
input当点击那个input框时那个input后面跟一个提示
<style>
input+span {display:none}
input:focus+span {display:inline}
</style>
<p>证件号码：<input type="text" name="zjhm" value=""/><span>请输入证件号码</span></p>
<p>手机号：<input type="text" name="sjh" value=""/><span>请输入手机号</span></p>
<p>电子邮箱：<input type="text" name="dzyx" value=""/><span>请输入电子邮箱</span></p>
Inpu手机号验证
回车提交触发事件
<script>
function checkMobile(){
var sMobile = document.mobile.value
if(!(/^1[3|5|7|8][0-9]\d{4,8}$/.test(sMobile))){
alert("不是完整的11位手机号或者正确的手机号前七位");
document.mobileform.mobile.focus();
return false;
}
}
</script>
<form action="#" name="mobileform" method="post" onSubmit="checkMobile();">
<input name="mobile" size="40" maxLength="11" />
<input type=submit value="查 询">
</form>
离开input判断手机号
<input type="number" autocomplete="off" placeholder="请输入手机号" name="name" id="phone" onblur="upperCase()">
<script>
function upperCase(){
var phone = document.getElementById('phone').value;
if(!(/^1[34578]\d{9}$/.test(phone))){
alert("手机号码有误，请重填");
return false;
}
}
</script>
function checkPhone(){
var phone = document.getElementById('phone').value;
if(!(/^1[3456789]\d{9}$/.test(phone))){
alert("手机号码有误，请重填");
}else{
console.log("手机号正确");
}
}
Input框内只能为汉字
<input type="text" onchange="javascript:if(!/^[\u4e00-\u9fa5]+$/gi.test(this.value))alert('含有非汉字字符');">
Input框验证邮箱
<form action="">
输入：<input type="text" name="mazey" id="mazey" placeholder="请输入邮箱" onblur="check()"><span id="verification">填写邮箱</span>
<input type="button" value="验证" >
</form>
<script>
function check() {
var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/; //正则表达式
var verification = document.getElementById("verification");
var mailbox = document.getElementById("mailbox"); //要验证的对象
if(!reg.test(mailbox.value)) { //正则验证不通过，格式不对
verification.innerHTML = "请填写正确的邮箱";
return false;
} else {
verification.innerHTML = "?";
return true;
}
}
</script>
身份证号验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://jq.likeball.top/jq.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="text" id="userid" placeholder="请输入身份证号" onblur="vsCard()" />
</body>
</html>
<script type="text/javascript">
function vsCard() {
//15位或者18位身份证号码的正则表达式
var regIdCard =
/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
var idCard = $("#userid").val();
console.log(idCard);
//如果通过该验证，说明身份证格式正确，但准确性还需计算
if (regIdCard.test(idCard)) {
if (idCard.length == 18) {
var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); //将前17位加权因子保存在数组里
var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
for (var i = 0; i < 17; i++) {
idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
}
var idCardMod = idCardWiSum % 11; //计算出校验码所在数组的位置
var idCardLast = idCard.substring(17); //得到最后一位身份证号码
//如果等于2，则说明校验码是10，身份证号码最后一位应该是X
if (idCardMod == 2) {
if (idCardLast == "X" || idCardLast == "x") {
alert("恭喜通过验证啦！");
} else {
alert("身份证号码错误！");
}
} else {
//用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
if (idCardLast == idCardY[idCardMod]) {
alert("恭喜通过验证啦！");
} else {
alert("身份证号码错误！");
}
}
}
} else {
alert("身份证格式不正确!");
}
}
</script>
简单 的验证身份证号
JS 正则表达式 验证中国大陆身份证号码
/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
// 正则表达式：
var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
var cardNo = 336767199903037878
if(idcardReg.test(cardNo)) {
// 合法
}
// 身份证号: values
const province = values.substring(0, 2) //省
const city = values.substring(0, 4) //市
const area = values.substring(0, 6) //区
const sex = values.substring(16, 17) //性别
总结一个好的input
验证手机号
<form action="">
<input type="" oninput = "value=value.replace(/[^\d]/g,'')" value="请输入手机号" onfocus="javascript:if(this.value=='请输入手机号')this.value='';" name="name" id="phone" onblur="upperCase()"/>
</form>
<script>
function upperCase(){
var phone = document.getElementById('phone').value;
if(!(/^1[34578]\d{9}$/.test(phone))){
alert("手机号码有误，请重填");
return false;
}
}
</script>验证手机号
<form action="">
<input type="" oninput = "value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" name="name" id="phone" onblur="upperCase()"/>
</form>
<script>
function upperCase(){
var phone = document.getElementById('phone').value;
if(!(/^1[34578]\d{9}$/.test(phone))){
alert("手机号码有误，请重填");
return false;
}
}
</script>Input回车不可提交
<form action="#" method="post" onkeydown="if(event.keyCode==13){return false;}" >
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
<button type="submit">提交</button>
</form>这里注意我们只能为button按钮才可以，用input属性type为submit是不可以的。。
错误时不可提交
https://blog.csdn.net/q3254421/article/details/83154247
<div id="dom"></div>
<form>
<input type="text" name="name" id="name" value="" /><br />
<input type="text" name="pass" id="pass" value="" /><br />
<input type="submit" value="提交" onclick="return tj()"/>
<!--/*
* 提交，将我们的函数值在进行返回给我们的框
* 由于我们的tj()函数我们下面已经获取过来值了。
*/-->
</form>
<script type="text/javascript">
function tj() {
var sc = document.getElementById("name").value;
/*
* alert(sc.length);
* 测试传过来的值的长度是多长，进行弹框测试
* 我们弹框过之后我们在判断长度如果长度小于6不可提交。
* 否则弹出成功过
*/
if(sc.length<6){
return false;
}else{
alert("成功");
}
/* return,我们的表单还可以进行提交。
* return true 我们的表单也可以提交。
* 这里我们的return和return true的用法一样。
* return false 我们的表单就不可以进行提交了。
*/
}
</script>
<input type="text" name="name" id="tagValue1" display='none'; >
<input type="submit" value="提交"/>
</form>input的几种类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input框的类型</title>
</head>
<body>
input文字类型：<input type="text" name="" id="" placeholder="文字类型" /><br /><br>
input密码类型：<input type="password" name="" id="" placeholder="密码类型" /><br /><br>
input数字类型：<input type="number" name="" id="" placeholder="数字类型" /><br /><br>
input按钮类型：<input type="button" name="" id="" placeholder="按钮类型" value="按钮类型" /><br /><br>
input重选类型：<input type="reset" name="" id="" placeholder="重选类型" /><br /><br>
input提交类型：<input type="submit" name="" id="" placeholder="提交类型" /><br /><br>
input隐藏类型：<input type="hidden" name="" id="" placeholder="隐藏类型" /><br /><br>
input单选框类型1：<input type="radio" name="radio" id="" placeholder="单选框类型1" /><br /><br>
input单选框类型2：<input type="radio" name="radio" id="" placeholder="单选框类型2" /><br /><br>
input单选框类型3：<input type="radio" name="radio" id="" placeholder="单选框类型3" /><br /><br>
input复选框类型1：<input type="checkbox" name="" id="" placeholder="复选框类型1" /><br /><br>
input复选框类型2：<input type="checkbox" name="" id="" placeholder="复选框类型2" /><br /><br>
input复选框类型3：<input type="checkbox" name="" id="" placeholder="复选框类型3" /><br /><br>
input复选框类型4：<input type="checkbox" name="" id="" placeholder="复选框类型4" /><br /><br>
input文件类型：<input type="file" name="" id="" placeholder="文件类型" /><br /><br>
input图片类型：<input type="image" src="img/13.jpg" name="" id="" value="" placeholder="图片类型" /><br /><br>
input颜色类型：<input type="color" name="" id="" placeholder="颜色类型" /><br /><br>
input进度类型：<input type="range" name="" id="" placeholder="进度类型" /><br /><br>
input日期类型：<input type="date" name="" id="" placeholder="日期类型" /><br /><br>
input月份类型：<input type="month" name="" id="" placeholder="月份类型" /><br /><br>
input星期类型：<input type="week" name="" id="" placeholder="星期类型" /><br /><br>
input时间类型：<input type="time" name="" id="" placeholder="时间类型" /><br /><br>
input获取本地时间类型：<input type="datetime-local" name="" id="" placeholder="获取本地时间类型" /><br /><br>
input电话类型：<input type="tel" name="" id="" placeholder="电话类型" /><br /><br>
input邮箱类型：<input type="email" name="" id="" placeholder="邮箱类型" /><br /><br>
input链接类型：<input type="url" name="" id="" placeholder="链接类型" /><br /><br>
input时间类型：<input type="datetime" name="" id="" placeholder="时间类型" /><br /><br>
input搜索类型：<input type="search" name="" id="" placeholder="搜索类型" /><br /><br>
</body>
</html>
js将按钮禁止点击
document.getElementById("reducenumber").disabled=true;可点击
document.getElementById("bt1").disabled=false;