html 心得

  • 禁止使用输入法
1.document.getElementById(id).style.imeMode="disabled"

2.#XXX {
  ime-mode:disabled;
}
  • 将input[type=date] 显示的默认时间设置为当前时间
1、在html5中定义时间控件

<input type="date" id="datePicker"  value=""/>

2、编写脚本实现自定义时间的赋值

//创建一个当前日期对象
var now = new Date();

//格式化日,如果小于9,前面补0
var day = ("0" + now.getDate()).slice(-2);

//格式化月,如果小于9,前面补0
var month = ("0" + (now.getMonth() + 1)).slice(-2);

//拼装完整日期格式
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;

//完成赋值
$('#datePicker').val(today);
//只能是整数
<input type = "text" name= "number" id = "number" onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 

//限制是两位的小数
<input type = "text" name= "price" id = 'price' onkeyup= "if( ! /^d*(?:.d{0,2})?$/.test(this.value)){alert('只能输入数字,小数点后只能保留两位');this.value='';}" />  

通过 正则表达式判断,不满足 执行alert。
第一个正则表达式是
/^d+$/ 表示可以是一个或者多个数字
第二个正则表达式是
/^d*(?:.d{0,2})?$/
表示必须是数字开头,数字结尾。
这里重点是要数字结尾, 在计算机中通常小数 1. , 2. 这种写法, 就是可是小数点结尾的, 是正确的。这里强制让数字结尾。
test()
只要找到满足的部分就返回真。
意思是

/d/. test ( 'a' ) // false  
/d/. test ( 'a' ) // true  
/d/. test ( 'a' ) // true  

所以要保证谁开头谁结尾。 开头用 $, 结尾用 ^

1.只能输入数字和英文的:

<input onkeyup="value=value.replace(/[\W]/g,'') "   
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"   
ID="Text1" NAME="Text1">   

2.只能输入数字的:

<input onkeyup="value=value.replace(/[^\d]/g,'') "   
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"   
ID="Text2" NAME="Text2">

3.只能输入全角的:

<input onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')"   
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"   
ID="Text3" NAME="Text3">   

4.只能输入汉字的:

<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"   
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"   
ID="Text4" NAME="Text4">   

5.邮件地址验证:

var regu =   
"^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*[0-9a-zA-Z]+))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2}|net|NET|com|COM|gov|GOV|mil|MIL|org|ORG|edu|EDU|int|INT)$"   
var re = new RegExp(regu);   
if (s.search(re) != -1) {   
return true;   
} else {   
window.alert ("请输入有效合法的E-mail地址 !")   
return false;   
}  

//这个也可以
[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?

6.身份证:

^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$

7.17种正则表达式

"^\\d+$"  //非负整数(正整数 + 0)   
"^[0-9]*[1-9][0-9]*$"  //正整数   
"^((-\\d+)|(0+))$"  //非正整数(负整数 + 0)   
"^-[0-9]*[1-9][0-9]*$"  //负整数   
"^-?\\d+$"    //整数   
"^\\d+(\\.\\d+)?$"  //非负浮点数(正浮点数 + 0)   
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"  //正浮点数   
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"  //非正浮点数(负浮点数 + 0)   
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"  //负浮点数   
"^(-?\\d+)(\\.\\d+)?$"  //浮点数   
"^[A-Za-z]+$"  //由26个英文字母组成的字符串   
"^[A-Z]+$"  //由26个英文字母的大写组成的字符串   
"^[a-z]+$"  //由26个英文字母的小写组成的字符串   
"^[A-Za-z0-9]+$"  //由数字和26个英文字母组成的字符串   
"^\\w+$"  //由数字、26个英文字母或者下划线组成的字符串   
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"    //email地址   
[a-zA-z]+://[^\s]*  //url

推荐阅读更多精彩内容