第二章 表单常用代码

知识点：

常见的表单文本区域操控技术：禁止输入、字符限制和去除空格等；
表单域和文件结合：文件上传、文件限制、清除上传文件等；
字符串操作：大小写转换、数字转字符等；
表单验证：密码强度、常见验证规则等； 表单选取：单选框的选中、复选框全选等。

1.去除字符串左右两边的空格

<input type="text" id="strs" value="    过滤空格" />
<input type="button" id="strbtn" value="过滤" />
<script type="text/javascript">
    window.onload = function (){
    var _strbtn = document.getElementById("strbtn"),
    str = document.getElementById("strs");

    _strbtn.onclick = function(){
    str.value = str.value.replace(/^(\s|\u00a0)+|(\s|\u00Ao)+$/g," ");
        alert(str.value);
        }
    }
</script>

2.验证用户是否输入
通常先过滤再验证（用户输入空格就相当于没有输入）。
创建一个isContent()函数,包含两种写法。
两种方法风格上相似，只是比较算法上有些不同，第一种简洁，性能更好。

function isContent(chars){ 
    //验证是否为空，chars为过滤后的字符
    return !chars?true:false;//第一种写法
    return chars.length == 0?true:false;//第二种写法
}

解释：chars为过滤后的字符：str.value.replace(/^(\s|\u00a0)+|(\s|\u00Ao)+$/g,” “)

3.禁止输入
验证码的存在就是为了防范恶意机器人重复注册或者频繁登录，当网站后台程序判定此为恶意操作时，就会禁止文本框输入。
方案有两种：
(1)通过浏览器对表单元素中特殊属性的支持来禁止输入。代码如下：

<input type="text" value="禁止输入" disabled="disabled" />
<input type="text" value="禁止输入" disabled />
<input type="text" value="禁止输入" readonly />

注意：

 1.disabled属性无法与<input type="hidden">一起使用
 2.readonly 属性可与<input type="text"/>或<input type="password"/>配合使用。

(2)通过javaScript控制输入方式。
通过事件来控制文本输入或控制焦点。

inputId.onfocus = function(){
    inputId.blur();//控制失去焦点
}

4.关闭输入法
略

5.禁止复制粘贴
原理：为元素添加copy与paste事件，并在事件中返回false。

banCopyId.oncopy = function (){reutrn false;}//禁止复制
banCopyId.onpaste = function (){reutrn false;}//禁止粘贴

6.限制只能输入数字
方案有两:
(1).使用html5

<form>
    <input type="number" name="numberHTML5" value="HTML5只能输入数字" id="banNumberHTML5" />
    <input type="text" value="HTML5只能输入数字" pattern=[0-9] id="patternHTML5" />
    <input type="submit" value="提交" />
</form>

(2)使用js

<input type="text" name="number" value="只能输入数字" id="banNumber" />