英文输入框字符纠正

前言

在仅可输入英文字符的输入框内填写中文或其他语言的字符时,会给出报错。如果用户在复制进大段文字中夹杂了少许中文标点符,那么很难排查。因此,需要在原有校验基础上进行交互改进:失焦后标点符号自动转换,还有不能转换的给出提示框,同意则自动删除非法字符,取消则关闭提示框,用户手动修改。

概述

这是结合jquery 的 validate 表单验证插件及已有的 UI 组件进行的表单输入框交互改进方案。因此,如果不是 validate 框架则要重写 js 方法,如果是自定义的提示框结构样式,则需要添加相应的钩子:.J-x2en-contianer/.J-x2en-feedback/.J-m-tip/.J-show-btn/.J-confirm-btn/.J-cancel-btn

效果展示

效果展示

详述

html 代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="form-item">
<label class="form-label">remark:</label>

<div class="form-fields">
<div class="col-9">
<textarea name="remark" placeholder="" class="input-text input-description"></textarea>
<div class="feedback-block auto-en-feedback J-x2en-feedback" wrapfor="remark">
<div class="auto-en-extra">
<a href="javascript:void(0)" class="J-show-btn">Not found?</a>
<div class="m-tip arrow-bottom J-m-tip">
<div class="tip-con">
The system will help you to delete non-English characters. Are you sure to continue?<br>
<a href="javascript:void(0);" class="btn btn-main J-confirm-btn">Confirm</a>
<a href="javascript:void(0);" class="btn J-cancel-btn">Cancel</a>
</div>
<div class="arrow arrow-out">
<span class="arrow arrow-in"></span>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

validate 扩展方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**
* 非英文标点符号自动转成英文标点符号,如果还有无法转化的,则给出报错提示。
*/
$.validator.addMethod("x2en", function (val, ele, params) {
// 非英文不包含特殊符号正则
var reg = /[^\x00-\x9f\xa1-\xff\u0000-\u009f\u00a1-\u00ff\u0021-\u002c\u002e\u002f\u003a-\u0040\u0043\u0046\u005b-\u0060\u007b-\u007d\u00a1-\u00ac\u00ae-\u0113\u0116-\u0122\u0124-\u012b\u012e-\u014d\u0150-\u017e\u0192\u01b5\u01f5\u0237\u02c6\u02c7\u02d8-\u02dd\u0311\u0391-\u03a1\u03a3-\u03a9\u03b1-\u03c9\u03d1\u03d2\u03d5\u03d6\u03dc\u03dd\u03f0\u03f1\u03f5\u03f6\u0401-\u040c\u040e-\u044f\u0451-\u045c\u045e\u045f\u2010\u2013\u2015\u2016\u2018-\u201a\u201c-\u201e\u2020-\u2022\u2025\u2026\u2030-\u2035\u2039\u203a\u203e\u2041\u2043\u2044\u20ac\u20db\u20dc\u2102\u2105\u210a-\u2113\u2115-\u211e\u2122\u2124\u2127-\u2129\u212c\u212d\u212f-\u2131\u2133-\u2138\u2153-\u215e\u2190-\u219b\u219d-\u21a7\u21a9-\u21ae\u21b0-\u21b3\u21b5-\u21b7\u21ba-\u21db\u21dd\u21e4\u21e5\u2200-\u2205\u2207-\u2209\u220b\u220c\u220f-\u2214\u2216-\u2218\u221a\u221d-\u2238\u223a-\u2257\u2259\u225a\u225c\u225f-\u2262\u2264-\u228b\u228d-\u229b\u229d-\u22a5\u22a7-\u22b0\u22b2-\u22bb\u22bd-\u22db\u22de-\u22e3\u22e6-\u22f1\u2305\u2306\u2308-\u2310\u2312\u2313\u2315\u2316\u231c-\u231f\u2322\u2323\u232d\u232e\u2336\u233d\u233f\u2423\u24c8\u2500\u2502\u250c\u2510\u2514\u2518\u251c\u2524\u252c\u2534\u253c\u2550-\u256c\u2580\u2584\u2588\u2591-\u2593\u25aa\u25ab\u25ad\u25ae\u25b1\u25b3-\u25b5\u25b8\u25b9\u25bd-\u25bf\u25c2\u25c3\u25ca\u25cb\u25ec\u25ef\u2605\u2606\u260e\u2640\u2642\u2660\u2663\u2665\u2666\u266a\u266d-\u266f\u2713\u2717\u2720\u2736\u2758\u2772\u2773\u2935\u2985\u2986\u29bf\u2a00-\u2a02\u2a04\u2a06\u2a0c\u2a0d\u2a10-\u2a17\u2a22-\u2a27\u2a29\u2a2a\u2a2d-\u2a31\u2a33-\u2a3c\u2a3f\u2a40\u2a42-\u2a4d\u2a50\u2a53-\u2a58\u2a5a-\u2a5d\u2a5f\u2a66\u2a6a\u2a6d-\u2a75\u2a77-\u2a9a\u2a9d-\u2aa2\u2aa4-\u2ab0\u2ab3-\u2ac8\u2acb\u2acc\u2acf-\u2adb\u2ae4\u2ae6-\u2ae9\u2aeb-\u2af3\u2afd\ufb00-\ufb04]/g;

var $input = $(ele),
$container = $input.parents('.J-x2en-contianer').length > 0 ? $input.parents('.J-x2en-contianer') : $input.parents('.form-item'),
$autoEnExtra = $container.find('.J-x2en-feedback'),
$tip = $autoEnExtra.find('.J-m-tip');
// 中文符号及其他全角符号转成英文及半角符号,规则同富文本
var CnToEn = function (cdata) {
var replaceString = new Array(/`/g, "`", /~/g, "~", /!/g, "!", /#/g, "#", /$/g, "$", /%/g, "%", /(/g, "(", /)/g, ")", /“/g, "\"", /”/g, "\"", /;/g, ";", /:/g, ":", /,/g, ",", /。|./g, ".", /?/g, "?", / /g, " ", /'/g, "'", /‘/g, "'", /’/g, "'", ///g, "/", /"/g, "\"", /</g, "<", />/g, ">", /*/g, "*", /&/g, "&", /@/g, "@", /^/g, "^", /+/g, "+", /|/g, "|", /\/g, "\\", /./g, ".", /_/g, "_", /=/g, "=", /-/g, "-", /……/g, "...", /1/g, "1", /2/g, "2", /3/g, "3", /4/g, "4", /5/g, "5", /6/g, "6", /7/g, "7", /8/g, "8", /9/g, "9", /0/g, "0", /、/g, ",", /{/g, "{", /}/g, "}", /[/g, "[", /]/g, "]", /A/g, "A", /B/g, "B", /C/g, "C", /D/g, "D", /E/g, "E", /F/g, "F", /G/g, "G", /H/g, "H", /I/g, "I", /J/g, "J", /K/g, "K", /L/g, "L", /M/g, "M", /N/g, "N", /O/g, "O", /P/g, "P", /Q/g, "Q", /R/g, "R", /S/g, "S", /T/g, "T", /U/g, "U", /V/g, "V", /W/g, "W", /X/g, "X", /Y/g, "Y", /Z/g, "Z", /a/g, "a", /b/g, "b", /c/g, "c", /d/g, "d", /e/g, "e", /f/g, "f", /g/g, "g", /h/g, "h", /i/g, "i", /j/g, "j", /k/g, "k", /l/g, "l", /m/g, "m", /n/g, "n", /o/g, "o", /p/g, "p", /q/g, "q", /r/g, "r", /s/g, "s", /t/g, "t", /u/g, "u", /v/g, "v", /w/g, "w", /x/g, "x", /y/g, "y", /z/g, "z",/—/g,"-",/–/g,"-");
for (i = 0; i < replaceString.length; i = i + 2) {
cdata = cdata.replace(replaceString[i], replaceString[i + 1]);
}
return cdata;
};

var result = CnToEn(val);
$(ele).val(result);

if(reg.test(result)) {
$autoEnExtra.on('click', '.J-show-btn', function(){
$tip.show();
});
$autoEnExtra.on('click', '.J-confirm-btn', function(){
result = result.replace(reg, '');
$(ele).val(result).valid();
$tip.hide();
});
$autoEnExtra.on('click', '.J-cancel-btn', function(){
$tip.hide();
});
$autoEnExtra.show();
return false;
}else {
$autoEnExtra.hide();
return true;
}

});

后记