Web APIS 第七天

正则表达式　

　　test() 方法 用来查看正则表达式与指定的字符串是否匹配

　　test方法 用于判断是否有符合规则的字符串，返回的是布尔值 找到返回

　　true，否则false

 

　　

　　正则测试工具: http://tool.oschina.net/regex

　　

　　1. 字符类 . (点)代表什么意思？

　　 匹配除换行符之外的任何单个字符

　　2. 字符类 [] 有若干代表什么意思？

　　 [abc] 匹配abc其中的任何单个字符

　　 [a-z] 匹配26个小写英文字母其中的任何单个字符

　　 [^a-z] 匹配除了26个小写英文字母之外的其他任何单个字符

 

 

用户验证 案例

需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位

分析：

①：首先准备好这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/

②：当表单失去焦点就开始验证.

③：如果符合正则规范, 则让后面的span标签添加 right 类.

④：如果不符合正则规范, 则让后面的span标签添加 wrong 类

 

<input type="text">
<span></span>

<script>
    let input = document.querySelector('input')
    let span = input.nextElementSibling

    input.addEventListener('blur',function () {
        if (/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)){
            span.className = 'right'
            span.innerHTML = '输入正确'
        }else {
            span.className = 'error'
            span.innerHTML = '输入错误'
        }
    })
</script>