- A+
所属分类:前端学习
闲来无事打算自己写个缩短网址的程序,遇到了判断用户输入的网址是否合法的判断问题,后端来判断难免有点耗费后端资源了,想到了前端用js来判断,原代码如下:
<form class="form-horizontal" action="/xxx" method="POST">
<div class="form-group">
<textarea class="form-control" name="createUrl" id="createUrl" rows="1" placeholder="请输入要缩短得网址,每行一条!!"></textarea>
</div>
<button type="submit" class="btn btn-info" id="create-btn" onclick="return chackInput();">生成短网址</button>
</form>
<script>
function chackInput() {
var createurl = document.getElementById("createUrl")
var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
if (createurl.value.length == 0) {
alert("网址不能为空!!")
return false
}
if (urlP.test(createurl.value) != true) {
alert("请输入正确的网址!!")
return false
}
return true
}
</script>
js中的表单校验方法
判断输入是否为空
//表示如果去掉空格后的字符串的长度为0。
if(v.trim().length==0) {}
// 表示输入的内容为空
if(v.length==0) {}
用户名判断
//用户名正则,4到16位(字母,数字,下划线,减号)
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//输出 true
console.log(uPattern.test("ZhaoYanfu"));
密码强度判断
//密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符
var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//输出 true
console.log("=="+pPattern.test("ZhaoYanfu#"));
纯数字判断
var uPattern = /^[0-9]*$/;
//输出 true
console.log(uPattern.test("123213123"));
Email判断
//Email正则
var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//输出 true
console.log(ePattern.test("1550397589@qq.com"));
手机号判断
//手机号正则
var mPattern = /^[1][3,4,5,7,8][0-9]{9}$/;
//输出 true
console.log(mPattern.test("13507621800"));
身份证号码判断
//身份证号(18位)正则
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
//输出 true
console.log(cP.test("11010519800621321x"));
url判断
//URL正则
var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
//输出 true
console.log(urlP.test('https://www.zhuimengren.co/suiji/881.html'));
Ipv4地址判断
//ipv4地址正则
var ipP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
//输出 true
console.log(ipP.test("115.28.47.26"));
十六进制颜色判断
//RGB Hex颜色正则
var cPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
//输出 true
console.log(cPattern.test("#b8b8b8"));
QQ号码判断
//QQ号正则,5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;
//输出 true
console.log(qqPattern.test("1550397589"));
车牌号判断
//车牌号正则
var cPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
//输出 true
console.log(cPattern.test("黑F39007"));
纯中文判断
//包含中文正则
var cnPattern = /[\u4E00-\u9FA5]/;
//输出 true
console.log(cnPattern.test("追梦人"));