javascriptで文字列チェックしてみる
- ITよもやま
- 2019-11-4
以下のような条件で入力内容をチェックしたい。
- a-z,0-9とハイフン”-”が使用でる
- ハイフンを先頭または最後の文字にはできない
- 数字のみの文字列は不可
- 3文字未満の文字列は不可
- 連続するハイフンは不可
こちらがそのjavascriptコード。多分うまくいくと思う
<script type="text/javascript">
function canuse() {
target0 = document.getElementById("inputchkresult");
target0.innerHTML = "<span style='color: green;'>使用可能な文字です</span>";
targetX = document.getElementById("create_bttn");
targetX.innerHTML = "<input type='button' id='create_bttn_obj' value='Create' onclick='submit();'>";
}
function findupper() {
targetY = document.getElementById("inputchkresult");
targetY.innerHTML = "<span style='color: orange;'>大文字は小文字に変換されます</span>";
targetZ = document.getElementById("create_bttn");
targetZ.innerHTML = "<input type='button' id='create_bttn_obj' value='Create' onclick='submit();'>";
}
function underminerror() {
target1 = document.getElementById("inputchkresult");
target1.innerHTML = "<span style='color: red;'>3文字未満のアカウントは作成できません</span>";
target2 = document.getElementById("create_bttn");
target2.innerHTML = "";
}
function headortailerror() {
target3 = document.getElementById("inputchkresult");
target3.innerHTML = "<span style='color: red;'>ハイフンを先頭または最後の文字にはできません</span>";
target4 = document.getElementById("create_bttn");
target4.innerHTML = "";
}
function hyphenerror() {
target5 = document.getElementById("inputchkresult");
target5.innerHTML = "<span style='color: red;'>ハイフンは連続して使用できません</span>";
target6 = document.getElementById("create_bttn");
target6.innerHTML = "";
}
function onlynumerror() {
target7 = document.getElementById("inputchkresult");
target7.innerHTML = "<span style='color: red;'>数字だけでは作成できません</span>";
target8 = document.getElementById("create_bttn");
target8.innerHTML = "";
}
function wordserror() {
target9 = document.getElementById("inputchkresult");
target9.innerHTML = "<span style='color: red;'>使用できない文字が含まれています</span>";
target10 = document.getElementById("create_bttn");
target10.innerHTML = "";
}
function createhide() {
target11 = document.getElementById("inputchkresult");
target11.innerHTML = "<span style='color: red;'>不明なエラーです</span>";
target12 = document.getElementById("create_bttn");
target12.innerHTML = "";
}
function inputcheck() {
var acntinputvalue = "";
acntinputvalue = document.addrle_account_name.inputaccount.value;
if (acntinputvalue.length < 3){
underminerror();
checking = "NG"
return false;
} else {
checking = "OK"
}
function headortailcheck() {
if (acntinputvalue.match(/^[\-]/)){
headcheckresult = "NG";
} else {
headcheckresult = "OK";
}
if (acntinputvalue.match(/[\-]$/)){
tailcheckresult = "NG";
} else {
tailcheckresult = "OK";
}
if (headcheckresult == "NG" || tailcheckresult == "NG"){
headortailcheckresult = "NG";
} else {
headortailcheckresult = "OK";
}
}
headortailcheck();
if (headortailcheckresult == "NG"){
headortailerror();
checking = "NG";
return false;
} else {
checking = "OK";
}
if (acntinputvalue.match(/[\-][\-]+/) == null){
checking = "OK";
} else {
hyphenerror();
checking = "NG";
return false;
}
if (acntinputvalue.replace(/[0-9]/g , '') == ''){
onlynumerror();
checking = "NG";
return false;
} else {
checking = "OK";
}
if (acntinputvalue.replace(/[0-9a-z\-]/g , '') == ''){
checking = "OK"
} else {
wordserror();
return false;
}
if (acntinputvalue.match(/[A-Z]/g)){
findupper();
return false;
}
if (checking == "OK"){
canuse();
} else {
createhide();
return false;
}
}
</script>ただ、function findupper() は前のwordserror()と内容が重複するので、切り捨ててよい。 同様に不明なエラーとしている createhide() 部分も不要なはず。
ちなみに私、javascriptは初めて書きました。初心者のつたないコードですが、何かの参考になればと😅
こちらはHTMLのコード抜粋
<form action="createaccount.php" method='POST' onsubmit="return false;" name="addrle_account_name">
<section name="input">
<p id="yourname">
<input type="text" name="idname" id="inputaccount" maxlength="32" minlength="3" inputmode="text" placeholder=" Your account name" pattern="[a-z0-9\-]*">
<br><span id="inputchkresult">入力してください</span>
</p>
</section>
<section name="checkbutton">
<p id="usercheck_bttn"><input type="button" id="usercheck_bttn_obj" value="Check if it can be used" onclick="inputcheck()"></p>
<p id="create_bttn"></p>
</section>
</form>そして私、HTMLを書くのは15年ぶりくらいです。当時はまだHTML4.0.1しか無かった。HTML5は洗練されていますね😄
[AD]HTML5＆CSS3標準デザイン講座 30LESSONS【第2版】
[AD]HTML5＆CSS3標準デザイン講座 30LESSONS【第2版】【PDF版】
個人的にはPDFより紙の本を購入することをお勧めします。 メモとか付箋で貼っておけるし。
今回はここまで。