在上一篇的《中继器使用场景（五）：真实环境注册、多身份登录、找回密码》中提到，会专门就注册条件验证的案例出一篇教程，今天就详述如下：

原型参照：QQ注册。为了集中讲解，将qq昵称注册和邮箱账号注册合二为一，为大家演示。

先看演示GIF图

功能梳理

1、昵称不能包含中文，不能为空，失去焦点时，会出现不同的提示

2、密码不能包含空格，长度为8-16位，包含字母、数字、特殊符号（英文半角符号）不少于2种

3、密码框在密码输入变化时，实时检测是否符合标准（留意gif图中“灰色！”和“绿色√”图标的变化）

4、点击眼睛图标，能将密码中的“●”显示为输入的文本，松开鼠标时，又恢复为“●”

5、密码框失去焦点时，如果密码不符合规则，按优先顺序显示错误提示（留意gif图中红色错误提示的出现规律）

6、邮件地址不能为空，要有“.”“@”符号，不能包含中文，“.”和“@”之间要有字符，不能有两个@

7、手机号必须是数字，必须是1开头，必须满11位

8、验证码为两个数字两个字母组合，每刷新一次，更换一次，随机更换，不重复。

9、验证码栏不能为空，不能和验证图片不符

需要用到的函数

1、length：获取当前文本对象的长度，即字符个数；1个汉字的长度按1计算。

2、charAt(index)：获取当前文本对象中指定位置的字符，index为大于等于0的整数。位置从0开始算

3、charCodeAt(index)：获取当前文本对象中指定位置字符的Unicode编码，起始位置从0开始。

4、indexOf(‘searchValue’)：从左至右获取查询字符串在当前文本对象中首次出现的位置。未查询到时返回值为-1。

5、lastIndexOf(‘searchvalue’)：从右至左获取查询字符串在当前文本对象中首次出现的位置。未查询到时返回值为-1。

6、数字函数Math.random()：随机数函数，返回一个0~1之间的随机数。

7、数字函数Math.floor(x)：向下取整函数，获取小于或者等于指定数值的**整数。x为数字

原型制作