js 获取input的value值及验证手机号和汉字的正则表达式

德顺

发布于 2019-11-13 17:21:05

9.4K0

发布于 2019-11-13 17:21:05

文章被收录于专栏：前端资源前端资源前端资源

在项目中经常遇到需要验证输入内容的情况，可以通过 Javascript 判断输入内容，验证手机号或者是否为汉字。

简单的记录一下：

HTML部分：

<input type="text" name="name" id="name" placeholder="请输入您的姓名" value=""/>
<input type="number" name="mobile" id="mobile" placeholder="请输入您的手机号" value="">
<button id="button">提交</button>

js 部分：

首先获取到元素：

var uname = document.getElementById("name");
var umobile = document.getElementById("mobile");
var ubutton = document.getElementById("button");

判断用户名是否为空：

if(uname.value == ""){
    alert("请输入姓名！");
}

验证输入的是否是汉字：

var han = /^[\u4e00-\u9fa5]{2,9}$/; //设置汉字的正则表达式：2-9个汉字
if(!han.test(uname.value)){ //验证输入的内容是否是2-9个汉字
            alert("请输入汉字，不少于2个！");
}

验证手机号：

var myreg=/^[1][3,4,5,7,8][0-9]{9}$/; //设置手机号正则表达式
if(!myreg.test(umobile.value)){ //验证手机号格式是否正确
            alert("手机号格式不正确！");
}

拓展：JavaScript test() 方法

test() 方法用于检测一个字符串是否匹配某个模式。

如果字符串中有匹配的值返回 true ，否则返回 false。

语法：

RegExpObject.test(string)

RegExpObject 验证规则。

string 要检测的字符串。

实例：在字符串中全局搜索 "Hello" 和 "Runoob" 字符串:

var str="Hello world!";
//查找"Hello"
var patt=/Hello/g;
var result=patt.test(str);
document.write("返回值: " +  result); 
//查找 "w3h5"
patt=/w3h5/g;
result=patt.test(str);
document.write("<br>返回值: " +  result);

以上实例输出结果：